Horizontal scrolling Menu AND a Hamburger menu

Hi there,

to keep the same layout across all device sizes.

1. Disable the Mobile Header in Customizer > Layout > Header
2. Set the Mobile Menu Breakpoint to 0 in the Customizer > Layout > Header

That way you should only ever have the Desktop nav across all screen sizes.

Hi David,
Thank you for your assistance.

I have set the mobile breakpoint to 0 and have disabled the mobile menu in the header.

I can see the hamburger for Off-canvas in desktop and tablet but not on Mobile still.

Just in case it affects your suggestions:
1) I would ideally have the Off-Canvas hamburger appear in the header, next to my login button and nowhere else.
2) The Off-Canvas menu is showing a widget, is that why the sub-menu options do not appear?

This is the code I have added for the scrolling horizontal (sorry, I am not sure how to add it in any other way)

/* trying to have horizontal scroll menu*/

.main-navigation .main-nav>ul>li {
flex-shrink: 0;
}

.main-nav > ul.menu > li:not(:last-of-type) > a:after {
content: "";
padding-left: px;
}

.main-navigation .main-nav>ul {
flex-wrap: nowrap;
width: max-content !important;
}

.main-navigation .main-nav>ul>li:nth-of-type(1) {
padding-left: 5px;
}

.main-navigation .main-nav>ul>li:last-of-type {
padding-right: 5px;
}

div#primary-menu {
overflow-x: scroll;
}
@media(pointer: fine) {
#primary-menu::-webkit-scrollbar {
height: 0;
}
}

MANY THANKS
Rob

What option do you have selected for the Off Canvas ? Can you set it to just Desktop ?

Hi David,
I have would like to have it set for All scenarios (Desktop, Mobile, Tablet).

I can see the options for: Mobile Only / Desktop Only / On / Off

Within the customizer if I set it to:
- Mobile Only I cannot see it anywhere.
- Desktop Only I can see it on Desktop and Tablet, on my screen it appears underneath my horizontal scrolling primary menu
- On is Desktop and Tablet
- Off is showing nowhere

When I go down the page and the sticky menu kicks in it shows me my logo then underneath the primary horizontal scrolling menu and then underneath the Off Canvas hamburger (on Desktop and Tablet only).

Thanks,
Rob

NB I have left it currently set to Desktop Only

Try adding this CSS and keep the off-canvas menu setting to desktop only:

span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
    display: block !important;
}

Hi Ying,

Thank you. That is great and has the hamburger appearing on all formats (desktop, tablet and mobile).

Is it possible to relocate the hamburger? (It is currently underneath the scrolling menu navigation) Could it appear to the left of the menu?

Many thanks,
Rob

Yes, try adding this:

.inside-navigation {
    flex-wrap: nowrap !important;
}
.menu-bar-items {
    order: -1;
}

Hey,
Thank you, thats great!!

I have another question and do not know if this is a new topic or part of this...

Due to my horizontal scrolling primary menu I am not able to use the normal menu selection for Off-Canvas; If I do, it has the same characteristics as a primary menu, and is horizontal scrolling.

Instead, I have used the widget feature to add a Navigation Widget to the Off Canvas. The problem is this does not show any sub-menus.

Is there another solution?

Regards,
Rob

You just need to create a new set of menus and assign it to the off canvas menu.

Like this:
https://www.screencast.com/t/15s2Pp9nga

Hi Ling,
Thank you but I have tried that and the new menu doesn't format correctly in the off canvas (it scrolls) which is why I am trying with the widget. (I have found some other threads about sub-menu in widget so will check those)

You have fixed the horizontal scroll / hamburger menu issue for me I will open a new topic and mark this as resolved.

Just FYI (and others if they find this) my current Advanced CSS for this is:

/* horizontal scroll Primary menu*/

.main-navigation .main-nav>ul>li {
flex-shrink: 0;
}

.main-nav > ul.menu > li:not(:last-of-type) > a:after {
content: "";
padding-left: px;
}

.main-navigation .main-nav>ul {
flex-wrap: nowrap;
width: max-content !important;
}

.main-navigation .main-nav>ul>li:nth-of-type(1) {
padding-left: 5px;
}

.main-navigation .main-nav>ul>li:last-of-type {
padding-right: 5px;
}

div#primary-menu {
overflow-x: scroll;
}
@media(pointer: fine) {
#primary-menu::-webkit-scrollbar {
height: 0;
}
}

/* Makes the scroll go full width */

span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
display: block !important;
}

/* Off Canvas Hamburger in line with Navigation */
.inside-navigation {
flex-wrap: nowrap !important;
}
.menu-bar-items {
order: -1;
}

Thanks again :)

Can you try my solution and add #site-navigation in front of to all your related CSS so it targets the primary navigation only, for example:
Change this:

.main-navigation .main-nav>ul>li {
   flex-shrink: 0;
}

to

#site-navigation.main-navigation .main-nav>ul>li {
   flex-shrink: 0;
}

change this:

.main-nav > ul.menu > li:not(:last-of-type) > a:after {
content: “”;
padding-left: px;
}

to

#site-navigation.main-navigation .main-nav > ul.menu > li:not(:last-of-type) > a:after {
content: “”;
padding-left: px;
}

Hey Ying,
Thats great!!!

Thank you so much.

I have been able to use a menu selected for use in Off Canvas and the drop-downs work :)

For others, so my new code looks like this:

/* horizontal scroll Primary menu*/
#site-navigation
.main-navigation .main-nav>ul>li {
flex-shrink: 0;
}

#site-navigation.main-navigation .main-nav > ul.menu > li:not(:last-of-type) > a:after {
content: “”;
padding-left: px;
}

#site-navigation.main-navigation .main-nav>ul {
flex-wrap: nowrap;
width: max-content !important;
}

#site-navigation
.main-navigation .main-nav>ul>li:nth-of-type(1) {
padding-left: 5px;
}

#site-navigation
.main-navigation .main-nav>ul>li:last-of-type {
padding-right: 5px;
}

div#primary-menu {
overflow-x: scroll;
}
@media(pointer: fine) {
#primary-menu::-webkit-scrollbar {
height: 0;
}
}

/* Makes the scroll go full width */
#site-navigation
span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
display: block !important;
}

/* Hamburger in line with Navigation */
#site-navigation
.inside-navigation {
flex-wrap: nowrap !important;
}
.menu-bar-items {
order: -1;
}

Glad to hear that :)