Hide Toogle Menu Secondary Navigation And Show All The Item

[Randy]

Can I do this by my self,

From this

To like this

I wannta disable breakpoint, and make it possible to swipe right and left

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Randy]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Randy]

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

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Randy]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Randy]

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

I have attached my login.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Randy]

Thank very very much david. It Works….

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

Thanks..

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts