How do I hide navigation the menu icon on mobile devices?

This worked best for me. I used Hayden, but I imagine this will work for other templates. Go to DESIGN, CUSTOM CSS and add the following:

/** hide nav menu icon on mobile **/
.top-bar, .middle-bar, .bottom-bar {
 display:none !important;
}
label.mobile-nav-toggle-label.fixed-nav-toggle-label {
   display:none !important;
}

That works for hiding the mobile menu, but is there any way to make the menu items display underneath the title on the mobile site? Because right now with that CSS tweak there is no menu at all. Thanks so much!

On 12/18/2020 at 9:26 AM, one27mediahouse said:

Bumping this here and on other forum!  There seems to be no clear answer on forcing desktop menu on mobile.

If you use SS 7.1. add this to Design > Custom CSS

@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 70% !important;
}
.header-title {
    flex: 1 0 30% !important;
}
}

Can you add a link to your site?

Sure. http://dylanseeger.com

Anybody able to help with this? Thanks!

Try adding this to the Custom CSS Editor:

.page-borders-none #mobileMenuLink {
   display: none !important;
}

Using .main-nav worked for me. Information on IDs and classes to refer to and change are in the navigation.block file.

Trying to do the same thing as dylanseeger or even just turn the mobile navigation “hamburger” to white on the homepage only.

I am using the Forte template. By any chance do you know what code I should use to get this to work? Thanks!

Is there a way to do this, but for the standard site? (not mobile).

Did anyone find a solution to this to display the menu but not in dropdown form (mobile only). Could someone expand on LilyS's comment? Not sure how to do that. My website www.pathxo.com

Thank you!

Thanks a ton joncasey5!

@Danieljay @LilyS @trevordelaney @joncasey5I also wish to display the desktop navigation on my mobile versions (I am using the Bedford template). So far, all solutions I've tried remove the hamburger but do not replace it with text navigation. I do not understand the comment re using .main-nav. Thank you.

FWIW, other answers did not work for me. I tinkered around and was able to hide the mobile nav on my site by using the following CSS code. (I'm using the "Fulton" template)./* Hide mobile nav */.mobile-nav-toggle-label.show-on-scroll-mobile { display: none; }

Bumping this here and on other forum!  There seems to be no clear answer on forcing desktop menu on mobile.

On 12/22/2020 at 11:39 AM, tuanphan said:

If you use SS 7.1. add this to Design > Custom CSS

@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 70% !important;
}
.header-title {
    flex: 1 0 30% !important;
}
}

 

This is excellent and assists with my issue also, however I'd love to have the navigation on mobile sit to the far right corner. Is there a tweak to this code to cater for this? Currently it sits just to the right of my logo on the top left.

On 3/12/2021 at 7:51 AM, arogspace said:

This is excellent and assists with my issue also, however I'd love to have the navigation on mobile sit to the far right corner. Is there a tweak to this code to cater for this? Currently it sits just to the right of my logo on the top left.

Can you share link to your site? We can help easier