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