Archived topic
Horizontal scrolling Menu AND a Hamburger menu
20 replies · Started by Robert on February 25, 2023
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;
}
Can you link me to your site again?
Let me know :)
Hi,
Yes its Cryptosavvylife.com
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;
}
Hi,
AWESOME!
Thank you, I was sure I would need to compromise somewhere but nothing so far!
Brilliant stuff as always.
Thanks,
Rob
Glad to hear that :)