[Resolved] navigation below 768px

[dasigna]

hi there,
daring to post a question that might be answered before… (but couldnt find such)
i know theres a solution for triggering the mobile nav at some higher value than 768px, but is there any solution to keep the standard navigation below that???

having the (rare) situation with a navigation inheriting only three short items and would like to keep them shown down to approx. 680px and mobile nav chiming in at 659. basically at least the standard nav should still show up at 768 for table portrait, but currently at this point the hamburger is chiming in already.

any way to achieve this?

thanks in advance.

[Leo]

Hi there,

Unfortunately that’s not currently possible but it is a planned feature.

Would completely disable mobile navigation so that the three items will always show work for you?

[dasigna]

thanks leo, but pity.

completely disable mobile navigation might work in this case, at least its worth giving it a try – if that means the sticky navigation would stay…

whats the best way doing so? (ah – mobile header already is disabled btw.) css, php? couldnt get rid of it till now…

[Leo]

Give this a shot: https://generatepress.com/forums/topic/possible-to-not-turn-nav-bar-into-a-button-on-mobile/#post-120858

[dasigna]

hmmmm…

tried this

add_action( 'wp_enqueue_scripts', 'generate_dequeue_mobile', 100 );
function generate_dequeue_mobile() {
   wp_dequeue_style( 'generate-mobile-style' );
}

and worked in principle, mobile menu is gone – but the toggle in sticky still showed up… had to ‘kill’ it via css.
any other way to get rid of it?

[Tom]

I wonder if something as simple as this would work:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

[dasigna]

hi tom,

the first part already was (is) my solution and works well. have to have a look again if the second part is needed too…

only wondered why the toggle still shows up besides the nav items although not needed, and thought there might have been smth wrong with the code.

thanks again.

[Tom]

Would have to see your site to know why the menu toggle is still showing up.

It should be as easy as hiding it:

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

[dasigna]

hi tom,

sorry for coming back late…
everythings alright! already solved with the exact same css you provided – so no worry.

second part of my reply was seemingly a little misleading, so sorry for that. at first i wondered why the toggle still appeared (only) in sticky (!) and at first feared something might be wrong with the code…
but obviously not and the little css is needed anyway – right?

so – sorry for the little confusion 🙂

[Tom]

That’s right 🙂

No problem at all! Glad it’s all working now!

[Author]

Posts