0

I have been looking over some of the other answers, but they all seem to be concerned with iOS versions < 5.0. I built my page in React and the fixed header works fine in Desktop Chrome and Safari, but does not work in mobile browsers. The header links also do not work on mobile. What could be happening here? The other links on my page work just fine.

CSS:

    .header {
      position: fixed;
      top: 0;
      height: 100px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: white;
      background-color: #081c3f;
      font-family: 'Open Sans', sans-serif;
      font-weight: bold;
      z-index: 2;
      letter-spacing: .1em;
    }

HTML:

import React from 'react'; import './header.css';

export default class Header extends React.Component {
  render() {
    return (
      <div className='header'>
        <h1 className='name'>Conor Carey</h1>
        <div className='chapters'>
          <a href='#about'>ABOUT</a>
          <a href='#education'>RESUME</a>
          <a href='#work'>WORK</a>
          <a href='#contact'>
            <div className='contactLink'>
              CONTACT
            </div>
          </a>
        </div>
      </div>
    );
ConorBCarey
  • 91
  • 4
  • ...How can we possibly know what's wrong with your code unless you provide said code? Please update your question so that it shows all relevant code in a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve). For further information, please refer to the [help article](http://stackoverflow.com/help/how-to-ask) regarding how to ask good questions. – Obsidian Age Feb 14 '17 at 21:51
  • I provided the code – ConorBCarey Feb 15 '17 at 06:03
  • see http://stackoverflow.com/a/19254147/2724173 – Ismail Farooq Feb 15 '17 at 08:13
  • Thanks for the response. I just tried using that solution and it still doesn't work. – ConorBCarey Feb 16 '17 at 00:23
  • It is difficult to predict something without being able to see something concrete, it could be anything. Something that occurs to me is that navigation needs a higher value of z-index, or there are invisible elements that overlap and cover navigation,or you need to set the left and right values to 0 – chalo Feb 16 '17 at 21:09
  • Hi chalo. If you want to see what I'm talking about, its on my page at www.conorcarey.com You'll see on desktop, everything works just fine. On mobile, the links don't behave properly and the top bar isn't fixed anymore. – ConorBCarey Feb 18 '17 at 07:00

0 Answers0