Jump to content

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

Go to solution Solved by joncasey5,

Recommended Posts

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.

Link to comment
  • 2 weeks later...

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.

Link to comment
  • 1 year later...

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
Link to comment
  • 3 months later...
  • 1 month later...
  • 1 year later...

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

Link to comment
  • 6 months later...
  • Solution

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




Link to comment
  • 5 months later...

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

Link to comment
  • 9 months later...
  • 3 years later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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.

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hey guys! This has been super helpful in removing the hamburger/double line upper R corner navigation from small devices/phones and when viewing from a computer. I recently noticed, however, that these nav bars still appear when I access my site on an ipad. Any thoughts on how to remove it from there as well? Thank you. www.doomvintage.com

unnamed.jpg

Link to comment
On 2/14/2023 at 4:04 AM, DoomVintage said:

Hey guys! This has been super helpful in removing the hamburger/double line upper R corner navigation from small devices/phones and when viewing from a computer. I recently noticed, however, that these nav bars still appear when I access my site on an ipad. Any thoughts on how to remove it from there as well? Thank you. www.doomvintage.com

unnamed.jpg

Add to Design > Custom CSS

.burger-inner {
    visibility: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 12/21/2020 at 7:39 PM, 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 worked for me but now my logo is left justified. I'd like it to be centered. Any ideas? Image attached. 

52841.jpg

Link to comment
  • 11 months later...
On 2/27/2023 at 11:38 AM, tuanphan said:

It looks like you solved it?

image.png.74f7b74fab54c275aee1be1ce7a6b3b3.png

Made it work, so that it is on the right side again. 
By changing this
 

}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 70% !important;
}
.header-title {
    flex: 1 0 30% !important;
}
}

 

to this

 

}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 0% !important;
}
.header-title {
    flex: 1 0 90% !important;
}
}

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.