[instadesignParticipant]

Hi Rad,

Thanks for this, but I’m not sure how to action your recommendation “I recommend that you should hide the notice above the navbar on mobile.” – could you elaborate?

Thanks,

Henry

[Paul RModerator]

Hi Henry,

I can no longer see the notice on top?

Have you removed it?

May I know what plugin did you use for it.

Thanks

[instadesignParticipant]

Hi Paul,

I’m not sure what notice you’re referring to… do you mean the Cookie Consent? That is a plugin but this issue is not about that or any kind of notice, it’s about the header not sticking to the top of the page when scrolling on mobile.

Thanks,

Henry

[instadesignParticipant]

P.S. I’ve just looked at my video again and thought maybe the confusion is about that orange ‘touch to start recording’ notice – that was just the screen recording app I was using!

[RupokMember]

Hi there,

I have checked your video and it’s not the same on my end. Here is screecast on my end on mobile – https://vid.me/LHt7

Thanks!

[instadesignParticipant]

Hmm that’s true, it looks okay on your mobile… so I guess it’s down to different devices/ Android versions/ browsers rendering/ painting differently? I’ve realised that the behaviour has actually changed on my phone now but it’s still not right: https://goo.gl/photos/c32KLMqNLker2diRA

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 767px) {
body .x-navbar-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 68px;
    background: #fff;
    z-index: 999999;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
}

body .x-navbar {
    height:68px;
}
}

Hope that helps.

[instadesignParticipant]

Hi Paul,

I think you’ve cracked it! Finally this seems to be working, though I’ve had to remove some other media query CSS that I think was conflicting, like this bit:

.x-navbar-wrap .x-navbar {
        position: fixed !important;
        top: 0 !important;
    }

Thank you very much for your patience, to you and your colleagues, well beyond the extra mile as always!

[instadesignParticipant]

I spoke too soon! Although the header not scrolling issue is now fixed, the mobile nav menu has stopped working entirely! 🙁

If I remove this code the nav menu works, if I re-add it it breaks:

    body .x-navbar-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 68px;
    background: #fff;
    z-index: 999999;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
}

I wonder if there are conflicts occurring with other bits of CSS code I’ve added in my media queries as suggested in this thread? Maybe you could just review my media queries as they stand now:

@media screen and (min-width:769px) {
    .x-nav-articles {
    margin-top: -22px;
    }
}

@media screen and (max-width:979px) {
 
     body .x-nav-wrap.mobile .x-nav {
        overflow-y: scroll !important;
        max-height: 480px;
    }

    .x-navbar {
      position: fixed !important;
      top: 0 !important;
      z-index: 1;
      width: 100% !important;
      opacity: 0.966;
    }

    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
      position: fixed !important;
  }

    .x-nav-wrap.mobile .x-nav {
    overflow-y: visible !important;
  } 

    .x-navbar-fixed-left {
       position: fixed !important;
   }

    .touchevents .x-navbar-fixed-top, .touchevents .x-navbar-fixed-left, .touchevents .x-navbar-fixed-right {
        position: relative !important;
    }

  .x-brand img {
        max-width: 140px;
        margin-top: -10px;
  }
  
  .x-navbar {
        max-height: 68px !important;
  }

  .x-navbar-inner {
    min-height: 40px !important;
  }

  .x-btn-navbar {
    margin-top: 9px !important;
    padding: 0.4em 0.45em;
  }

.x-nav-wrap.mobile .x-nav {
    overflow-y: scroll !important;
    max-height: 480px;
}

  .x-nav-wrap.mobile.collapse.in, .x-nav-wrap.mobile.collapsing {
    background-color: #fff;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 0 0 19px 19px;
    border-bottom: 1px solid #5B4686;
    box-shadow: 0px 5px 5px rgba(112, 111, 111, 0.50);
  }

  .x-breadcrumb-wrap {
    padding-top: 6px;
    padding-bottom: 3px;
  }

  .x-main {
    top: 4px !important;
  }

    .class1{
  top:0;

  }
  .class2{
  top:20px;

  }

}

@media screen and (max-width: 600px) {
      .x-container.width {
        width: 94%;
      }

      .content a {
        text-decoration: underline;
      }

      .esg-grid a, .square a, .x-btn {
        text-decoration: none !important;
      }
}

@media screen and (max-width: 980px) {
/*    .x-navbar-wrap .x-navbar {
        position: fixed !important;
        top: 0 !important;
    }
*/
    .x-blockquote {
      margin-top: 0.65em;
      margin-bottom: 0.65em;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
    }
}

@media screen and (max-width:767px) {
      .site {
    margin-top: 68px !important;
  }

    body .x-navbar-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 68px;
    background: #fff;
    z-index: 999999;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
}

body .x-navbar {
    height:68px;
}
  .intro-text {
      padding-right: 0px !important;
    }
    .intro-text h2 {
          font-size: 150% !important;
  }
}

[RadModerator]

Hi there,

It’s the navbar is supposed to be fixed position and not the navbar wrapper. Can you try this?

    body .x-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 68px;
    background: #fff;
    z-index: 999999;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
}

Thanks!

[instadesignParticipant]

Hi Rad,

Having updated that code, now the page looks like this when it loads. When I start scrolling the header goes to the top but then jumps around like crazy… it seems like there are conflicting instructions. I really just want to get this sorted now… I have provided admin access earlier in this thread, can you just try your code suggestions directly to speed up the process?

Thanks,

Henry

[instadesignParticipant]

Sorry, forgot the link: https://goo.gl/photos/ejGS4wKZKavX7A4r6

[ChristopherModerator]

Hi there,

Please find and remove this code:

@media screen and (max-width: 979px){
.x-navbar {
    max-height: 68px!important;
}
}

Find this code :

@media screen and (max-width: 767px){
body .x-navbar {
    height: 68px;
}
}

And update it to :

@media screen and (max-width: 767px){
body .x-navbar {
    height: auto;
    max-height: 100px;
}
}

Hope it helps.

[instadesignParticipant]

Hi Christopher,

I’ve made those changes, cleared all cache, but the site is still displaying as per the screenshot above on my mobile… could it be something to do with the Javascript?

[Paul RModerator]

Hi,

I was able to fix it by adding this in your custom > css

@media (max-width: 979px) {
body .x-navbar.x-navbar-fixed-left {
   top:0 !important;
   width:100%;
   height: 61px;
   max-height: 61px;
}

body .x-navbar-wrap {
   height: 61px;
}
}

@media screen and (max-width: 767px) {
.site {
    margin-top: 0 !important;
}
}

Kindly check on your end.

Thanks

[Author]

Posts