Site logo

Archived topic

Horizontal scrolling Menu AND a Hamburger menu

20 replies · Started by Robert on February 25, 2023

Viewing posts 16–21 of 21

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 :)

This archived topic is closed to new replies.