1

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
  • 101
  • 5
  • ...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

1 Answers1

0

I had the same problem and, for me at least, it had nothing to do with the header itself or anything to do with its location or the elements that contain it. I noticed that this behavior was only happening on my app's home page, so I started hiding the different components that made it up until I figured out that commenting out one of them fixed the problem. This particular component displayed a list of cards, had a title, and most importantly, a background. Due to the way I built my website, I had to create an individual child element of this component to serve as a colored background, making it wider than its container and the entire viewport to completely cover it. Making this background element 200% the width of its parent, for some reason I can't explain, caused my header and side navigation to not stick to the top of the page. Maybe someone knows more about CSS and can explain it better, but for me the solution was to just not make that element as wide.

Here goes some code to represent the situation:

.announcements {
     width: 100%;
     max-width: 1225px;

     margin: 0 auto;

     padding-top: 50px;
     padding-left: 85px;
     padding-right: 20px;
     padding-bottom: 0;

     // I actually use SCSS, but this is the element causing problems          
     &-background {
        position: absolute;
        top: 0;
        left: 50%;
        
        // Basically this idea of overflowing the container was the issue
        width: 200%;
        height: 100%;

        z-index: -1;
        // Just to have a nice colored background
        background-color: var(--primary-color);
    }

 }

Solution: Make that element just wide enough and not exagerate

    &-background {
        position: absolute;
        top: 0;
        left: 0;
        
        // I just need it to be a little wider that it's parent to ignore 
        // the padding
        width: calc(100% + 20px);
        height: 100%;

        z-index: -1;
        // Just to have a nice colored background
        background-color: var(--primary-color);
    }
Lázaro V.C.
  • 11
  • 1