Jump to content

How to style OVERLAY MENU DESKTOP vs OVERLAY MOBILE

Recommended Posts

https://www.lacalifornie.es/

 

Hello, I am going a bit crazy. Hopefully I can find some help in here.

I currently have an added code to trigger the overlay menu on desktop at a specific width. I did this to avoid having the nav links stacking when resizing the browser. 

The code is:
/*** Trigger mobile menu earlier ***/
@media screen and (max-width:1290px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

 

I am also using this plugin for mobile https://schwartz-edmisten.com/plugins/p/modern-mobile-menu-dropdown-for-squarespace 

I will like to be able to control the size and spacing of the links on both the overlay menu version for Desktop and the overlay menu version on mobile, separately.

Additionally I also have Squarekicker installed. 
Please i need help/guidance on where/how to adjust the styling for these.

Thanks in advance!
 

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Hi @tuanphan I am looking to adjust the size and spacing of the links on the OVERLAY MENU VERSION on DESKTOP. See the screenshot I attached above. This overlay menu triggers at a specific browser width. I don´t need to change anything on the Mega Menu layout on Desktop. Let me know if this does not make sense, maybe I am not explaining right...

Edited by LucyBold
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.