[Resolved] Horizontal scrolling Menu AND a Hamburger menu

[Robert]

Hi,
I have been trying various things following ideas and suggestions on the support pages.

I am trying to create something similar to the menu/navigation:
https://www.abc.net.au/news/
I like the way the page works for desktop and then still (with scrolling) for mobile both with the Hamburger for a fully featured nav menu if needed.

I now have a scrolling primary menu that with the Conditional Menu Plugin allows me to have different content on different pages.
That seems to work well. (note: it is not ideal for sub-menus, I know, but actually they bizarrely work on mobile!)

Rather than having lots in the scrolling menu, I thought I would add a permanent hamburger where I could have a complete menu structure. My plan was to use the widget feature within Off-canvas.(As any other menu is now set to scroll)

I then turned OFF-Canvas to ON (not just mobile or desktop) and added a navigation widget. This works except..

The challenge I have:
– The Off-Canvas Hamburger icon is added to the menu (I think?) as it shows on the sticky menu.
– The Off-Canvas hamburger icon doesn’t seem to show on mobile or is hidden due to the scrolling code?

Ideally, the off-canvas hamburger could be positioned permanently like on the news webpage above. Indeed, I will eventually add a Login button to my header element and this could be in the same row?

If there is a better way of doing this then I am happy to try.

Regards,
Rob

[David]

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.

[Robert]

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

[David]

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

[Robert]

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

[Robert]

NB I have left it currently set to Desktop Only

[Ying]

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;
}

[Robert]

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

[Ying]

Yes, try adding this:

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

[Robert]

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

[Ying]

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

[Robert]

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 🙂

[Ying]

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;
}

[Robert]

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;
}

[Ying]

Glad to hear that 🙂

[Author]

Posts