Hide Toogle Menu Secondary Navigation And Show All The Item

Hi there,

this article explains how to keep the horizontal secondary Nav.

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

Once in place share a link to your site and ill look at some CSS for making it 'swipeable' on mobile

Wow its work.. but I need your help.. can I make it horizontal not stacked up.

https://prnt.sc/umisw9

I have attach my blog. Please check it out..

I cannot see the Secondary nav on the URL you supplied ?

Please try on mobile version. I use this for only display on mobile

@media (min-width: 768px) {
.secondary-navigation {
display: none;
}
}

Looks like you have too many items in the secondary navigation for them to stay in one line:
https://www.screencast.com/t/g5Qg9X3yz

Thanks leo, I purposely did it for the testing. Is it stay on one line or not.

It's not. Here is the result on iPhone X using the Chrome mobile simulator to test
https://www.screencast.com/t/3wWPyvoJ3M

Would you help me, make it one line and swipe able like david said?

I have attached my login.

Replace the CSS with this:

@media (max-width: 768px) {
    .secondary-navigation {
        text-align: center !important;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .secondary-navigation ul {
        display: flex;
    }

    .secondary-navigation .sf-menu>li {
        flex: 1 0 120px;
        scroll-snap-align: center;
    }
}

.secondary-navigation .menu-toggle {
    display: none;
}

You can adjust the Menu Item Width in Customizer > Layout > Secondary Nav.

And in the above CSS this line: flex: 1 0 120px; sets the min width of each item.

Thank very very much david. It Works....

I love Generatepress team, this is the reason I dont interested on other theme..

Thanks..

You're welcome