Mobile Menu SS7.1 -burger +keeping menu

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

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? 

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. 

Try again with this

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

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 🙂

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