[CCNGParticipant]

Hi,

I have done some custom work to my navbar for desktop, but for some reason nothing is working on mobile, not even the links. When you click the hamburger menu it drops the page down but you can’t read any menu options and they don’t fit in the space.

When you click a menu option nothing happens. Need help with this ASAP to launch site.

http://www.jobscience.co.uk

Thanks

[RupokMember]

Hi there,

Thanks for writing in! It seems you have added lot of custom codes that creating conflicts. Kindly remove this to get expected result. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[CCNGParticipant]

Hi,

All code that has been added has been provided by your staff so I wouldn’t expect any conflicts. This seems to be the only section off at the moment.

I can provide login details if needed.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

@media (max-width:979px){
.x-navbar.x-navbar-fixed-top {
    background-color: #efefef !important;
}
.x-navbar .mobile .x-nav li>a {
    color: #000;
}
}

Hope it helps.

[JS_Marketing16Participant]

Hi,

The code seems to partially work but there seems to be a couple of problems still.

• When you first load the page the navbar is transparent (which is perfect) but when you open the menu the request a demo item which is a button on desktop appears over the header, see screenshot.

• After you scroll and return to top, the navbar doesn’t return to transparent

• Navbar doesn’t follow when you scroll (Not necessary but would be nice)

I will provide login credentials if you want to look at the CSS I have. There could be something conflicting.

[JS_Marketing16Participant]

This reply has been marked as private.

[CCNGParticipant]

Hi,

I accidentally posted from my other account. See the details above.

[RupokMember]

Hi there,

Thanks for writing in! So you want to make the Navabr fixed for mobile too? In that case, kindly update the previous code :

@media (max-width:979px){
.x-navbar.x-navbar-fixed-top {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.x-nav-wrap.mobile.collapse.in {
  background: rgba(255, 255, 255, 0.9);
}
}

Note that as the entire header is transparent at beginning so you will get transparent background for menu items too if you open it without scrolling a bit. However the above code (second block) will help to add a background color for the menu so it’s visible. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts