Topic: Make secondary navigation scroll horizontally and hide scrollbars

George
October 1, 2023 at 12:47 pm

I want to be able to scroll the secondary menu horizontally without it wrapping to a new line in smaller screen and also hide the scrollbars when this happens. Also, when the menu is scrollable I want to be able to scroll left and right and be able to see the menu from edge to edge. I tried a few things but couldn’t make it, can you help with CSS?

It’s the menu below the header in the attached URL. Menu is hidden on mobile.

Fernando

October 1, 2023 at 4:52 pm

Hi George,

Can you try this CSS?:

@media (max-width: 768px){
    nav#secondary-navigation .inside-navigation .main-nav ul{
        display: flex;
        flex-wrap: nowrap;
        width: fit-content;
    }
    nav#secondary-navigation .inside-navigation .main-nav{
        overflow-x: scroll;
    }
    nav#secondary-navigation .inside-navigation .main-nav ul li{
        white-space:nowrap;
    }
}

George

October 2, 2023 at 1:00 am

Ok, thanks for the pointers, Fernando. That bit of CSS worked for me:

/* Add horizontal scrolling */
nav#secondary-navigation .inside-navigation .main-nav ul {
	display: flex;
	flex-wrap: nowrap;
	width: fit-content;
}
nav#secondary-navigation .inside-navigation .main-nav {
	overflow-x: scroll;
}
nav#secondary-navigation .inside-navigation .main-nav ul li {
	white-space:nowrap;
}

/* Hide the scrollbar */
nav#secondary-navigation .inside-navigation .main-nav {
  overflow: auto;
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -webkit-overflow-scrolling: touch; /* Add smooth scrolling for Webkit browsers */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
nav#secondary-navigation .inside-navigation .main-nav::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

Fernando
October 2, 2023 at 4:04 pm

You’re welcome, George!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Make secondary navigation scroll horizontally and hide scrollbars