Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
Sign in to follow this  
dylanseeger

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

Question

I’d like to hide the mobile navigation menu, and instead just scale out my navigation menu underneath the title of my site when viewed on an iPhone. I do not want to disable the mobile style completely, just the menu drop down.

Any way to do this through CSS or code injection? Thanks!

My site is dyln.me.

Edited by claine

Alternative musician. I made Readers & Reporters.

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 1

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;
}




Share this post


Link to post
  • 1

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!


Alternative musician. I made Readers & Reporters.

Share this post


Link to post
  • 0

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

Edited by LilyS

Share this post


Link to post
  • 0

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!

Edited by goldntriangles

Share this post


Link to post
  • 0

> Re:

LilyS · Aug 07, 2014 at 05:23 PM 0 Using .main-nav worked for me. Information on IDs and classes to refer to and change are in the navigation.block file. >

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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; }

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...