Mobile menu adjustments with second/split navigation applies

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

Hi,

I need some help 🙂
I am building a website for a client and managed to add a split/second menu to the desktop with CSS code.

The thing is that the code also responds to the mobile menu, even though I also put in code for customisation of the mobile menu, the  split menu code must override the custom fonts mobile menu code?

This is the code i placed for split mobile: 

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 9px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -50px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 360px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}
@media screen and (min-width: 1000px){ 
  
}

And this is the code I put in for the custom fonts in mobile menu: 

//MOBILE MENU//
.header-menu-nav * {
    color: black !important;
  font-size: 13px !important; 
  letter-spacing: 0.30em)!important;
   line-height: 1.7; padding-top: 15px; 
}

//Hide secondary nav on mobile//
.wm-secondary-mobile-nav{
   display:none !important;
}

I also placed this code for customizing the size of the mobile fonts:
/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
// Header h1
 h1 {font-size:2.5rem !important} 

// Header h2
 h2 {font-size:1rem!important} 

// Header h3
 h3 {font-size:0.64rem !important} 

// Paragraph
 p {font-size:0.8rem !important} 
}

Anyone who knows why my mobile menu looks the way it does??  @tuanphan

Thank you so much!
Best, Sanna

What is password?

Hi!!

Password is "livi"

16 hours ago, SannaBuckhoj said:

Hi!!

Password is "livi"

Thank you.

You want to reduce mobile menu items size?