Docs

[bradmaclean]

Hi There!
I was hoping you could help me achieve the following design for my Header Navigation menu…
1) Display Mobile Menu (aka. Hamburger menu) on Desktop and Mobile. It should always be shown regardless of screen size or device.
2) On Desktop, always show two specific menu items to the right of the Hamburger menu on the header (see attached image. The rest of the menu items should remain within the hamburger menu.
3) On Mobile, show all menu items within the hamburger menu. In other words, the two menu items that show up outside the hamburger menu on desktop should be shown within the hamburger menu on mobile, thus only showing the hamburger menu in the header navigation.

Thanks so much!

Brad

[Joao]

Hi Brad,

I believe the easiet way to achieve that is to add this two links on the topbar and the rest (including these two on the navbar menu. Once you have done that we can target these two specific menu links to disappear on desktop and laptop from the button and make the topbar links disappear from your topbar.

So to start, please go to Appereance > Customizer > Header > Add topbar content the two html links.

Go to Appereance > Customizer > Custom > CSS and add

.x-topbar .p-info {
    float: right;
 }

And:

@media (max-width: 3000px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope that is clear, once you have done those steps, please reach us again for further customization,

Thanks

Joao

[bradmaclean]

This reply has been marked as private.

[Nico]

Let us know how it goes.

Thanks.

[Author]

Posts