[Resolved] Horizontal scrolling Menu AND a Hamburger menu

[Robert]

Hi Ling,
I know this is marked as solved but I just realised that the horizontal scroll has stopped working on the sticky nav so now it looks overloaded.

I went back and removed the #site-navigation until something stopped working. I now have it only left in one place (see my current code below)

Everything is working with this code (horizontal scroll, drop downs with menu in off canvas etc) except for the sticky menu no longer being scrolling.

Any options?

/* horizontal scroll Primary menu*/

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

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

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

/* Hamburger in line with Navigation */

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

[Ying]

Can you link me to your site again?

Let me know 🙂

[Robert]

Hi,
Yes its Cryptosavvylife.com

[Ying]

Try change this:

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

to:

.main-navigation:not(#generate-slideout-menu) .main-nav>ul {
    flex-wrap: nowrap;
    width: max-content !important;
}

[Robert]

Hi,

AWESOME!

Thank you, I was sure I would need to compromise somewhere but nothing so far!

Brilliant stuff as always.

Thanks,
Rob

[Ying]

Glad to hear that 🙂

[Author]

Posts