Jump to content

Mobile Menu SS7.1 -burger +keeping menu

Recommended Posts

Site URL: https://anythingtrial.squarespace.com/

password: anything

Hello! 

I am customizing the menu to learn how to hide various menu items per page. 

I am adding this (.header-nav-item:nth-child(n+2){display:none!important}) to hide the items after the first one but it only works on desktop view. On Mobile it shows all the items. Also, prefer not to have the Burger and just leave the menu as the one item displayed on the page. I think this is useful for everyone but especially so for multilanguage sites...

Thank you so much

In total>

  • How to in mobile get rid of Burger and keep regular menu in 7.1
  • How to hide all items after n+2. Currently, if i try to do that with , it hides the info inside the folders as well.... 
    (for desktop view in header code injection it is this: 
    .header-nav-item:nth-child(n+2){display:none!important}

I've searched and searched...

 

 

 

Screen Shot 2020-04-23 at 2.46.50 AM.jpg

Edited by mishmush
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

How to in mobile get rid of Burger and keep regular menu in 7.1

@media screen and (max-width:991px) {
.burger-box {
    display: none;
}
.header .header-title-nav-wrapper .header-nav {
    display: block;
}
}

How to hide all items after n+2. Currently, if i try to do that with , it hides the info inside the folders as well.... 
(for desktop view in header code injection it is this: 
.header-nav-item:nth-child(n+2){display:none!important}

You mean items in Dropdown Menu (anything, event schedule,...) or? 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

This was fast. Code looks so nice. This is a tricky one. I updated.

The burger box is still there so when i click on mobile it still displays both. the box menu and the burger menu.

Also there is something funny with spacing of the whole box its going outside of the mobile area... getting lost on the right. Interesting problem with 7.1. Thank you for answering so many questions. 

 

3.jpg

Link to comment

Try again with this

@media screen and (max-width:991px) {
.burger-box {
   visibility: hidden !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hm. The first one works better!

aside form clicking on the burger? You notice how the cat face and words in menu are getting cut off on the right on mobile? It does this in vertical view on the phone but not horizontal which is interesting.  

Maybe there is a way to move the burger way over off screen whle also no displaying it and that could get rid of it? like a padding or margin. Yeah, I am still learning this,  and will be taking an actual class soon so i learn how to talk to computers better. Cause conceptually I get it but my language skill are... abominable 🙂

Thank you so much for this, its inspiring 🙂

Link to comment
1 minute ago, mishmush said:

Hm. The first one works better!

aside form clicking on the burger? You notice how the cat face and words in menu are getting cut off on the right on mobile? It does this in vertical view on the phone but not horizontal which is interesting.  

Maybe there is a way to move the burger way over off screen whle also no displaying it and that could get rid of it? like a padding or margin. Yeah, I am still learning this,  and will be taking an actual class soon so i learn how to talk to computers better. Cause conceptually I get it but my language skill are... abominable 🙂

Thank you so much for this, its inspiring 🙂

@media screen and (max-width:991px) {
.header-nav {
    position: relative;
    left: -20px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.