[instadesignParticipant]

Hi Paul,

Now the header doesn’t stick to the top and the mobile nav menu is broken…

[LelyModerator]

Hello There,

Check this part from you custom CSS:

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

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

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

Look for this:

body .x-navbar {
    height: auto;
    max-height: 100px;
}

Remove this line: max-height: 100px;

Then look for this too:

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

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

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

Update to this:

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

    body .x-navbar.x-navbar-fixed-left {
   top:0 !important;
   width:100%;
}

Do let us know how this goes.

[instadesignParticipant]

Hi Lely

Thank you, I have tried that but still have the problem. I am now a month overdue delivering this website due to this one issue, is there any way I can escalate this support ticket? Or can I just provide you with FTP access so you can iterate these attempted solutions much more quickly at your end?

Thanks,

Henry

[Paul RModerator]

Hi Henry,

I can see a lot of redundant code in your style.css.

Do you mind removing all css codes pertaining to your navbar and let us start from scratch again.

Also please provide ftp login in private reply so we can properly check your css.

Thanks

[instadesignParticipant]

Hi Paul,

That redundant code is all code that has been suggested here by you and your colleagues… having reached out in the X theme Facebook user group, Donald McGuinn has solved the problem for me.

I have removed ALL CSS and Javascript that has been suggested here and replaced it very simply with this:

@media screen and (max-width:979px) {
 
  .masthead.masthead-inline {
  position: fixed !important;
  z-index: 10000;
  width: 100%
  }

  .x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
    top: 68px !important;
  }

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

…and now everything appears to be working perfectly: the header sticks to the top, doesn’t behave weirdly, and the mobile nav menu still works and is scrollable. This is all I wanted to achieve in the first place…

Of course I am really happy this is finally solved but I just can’t believe this has gone on for over a month here with you guys… I mean your responsiveness is excellent but I have to say that I feel that if the ticket had just been dealt with by one person you should have been able to solve it much, much more quickly. I say this not as a criticism but as feedback for your team – a lot of my time but also yours could have been saved!

Thanks all the same for all the support and all the best,

Henry

[Paul RModerator]

You’re welcome and glad to know it’s fixed now.

Have a great day!

[Author]

Posts