Docs

[Tristan A]

Ok thanks! I must have accidentally cut out some of the code.

I just fixed it as per your instructions. As for the hamburger menu, this is now entirely as desired!

Only issue now is that on the homepage only I have a topheader above the menu. (the black one with the red button in it). On mobile, this topbar sits in front of the navmenu, instead of on top, effectively rendering the navbar invisible?

How should I fix this?

Many thanks.

[Paul R]

Hi Tristan,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.home .x-navbar {
   position:static !important;
}

.home .x-btn-navbar {
    margin-top: 3px;
}
}

Hope that helps.

[Tristan A]

Ok, the topbar is fixed now!

It seems though, that on the homepage the menu is still opening up downward, outside the mobile screen boundaries, so users still don’t see it opening up.

[Nabeel A]

Hi Tristan,

You can try displaying the navigation bar on top of the screen for small devices:

@media screen and (max-width: 767px){
.home header.masthead.masthead-inline {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #fff;
    z-index: 9999;
}
}

Let us know how this goes!

[Tristan A]

Ok, that works.

THe problem is however, that on the homepage the topbar needs to sit below the slider, otherwise the slider doesn’t make any sense. It has a pointer to a button that sits on the topbar below.

I am getting worried that this is becoming complicated. I don’t know how to code JS, but what about this:

On small screens, the home screen shows a slider with the navbar and topbar below it. When the user clicks the hamburger menu, a piece of JS code makes the screen scroll, so that the slider is now out of sight, and the menu moves to the top?

[Paul R]

Hi,

Good idea with the js code.

Kindly remove the css code given above then add this in custom > javascript in the customizer.

jQuery(function($) {
    $(".x-btn-navbar").on( "click touchend", function() {
    $('html, body').animate({
        scrollTop: $(".x-navbar").offset().top
    }, 1000);
});
});

Hope that helps.

[Tristan A]

Yes! Thank you. That works!

[Nabeel A]

Glad it worked.

Cheers!

[Author]

Posts