Jump to content

customising mobile overlay menu desktop

Go to solution Solved by JayVanDyke,

Recommended Posts

https://www.annajonesbridal.co.uk/home-new

 

hey, so ive forced mobile menu dropdown / overlay menu on desktop, now i'm having a hard time editing it.

on mobile, it is really nearly there with how it looks. it's just the button i need customising and moving! the button should look like the attached, just a text link and line underneath:

 

Screenshot 2023-12-04 at 15.57.07.pngScreenshot 2023-12-04 at 15.53.25.png

 

and then the desktop version, the spacing is all off! 

is there a way to fix the link / menu item list / page line height of the desktop version only and be able to see the star icon etc like the mobile version? 

 

 

Screenshot 2023-12-04 at 15.55.47.png

Link to comment
  • Solution

It looks to me like it's a margin that is blowing up those links and making them so tall. You can try something like this. I just put some numbers in that I eyeballed using the browser but you might have better numbers that will look better. Also if you need adjustments at other screen sizes for the same things, smaller laptop, tablet, etc just copy and paste it again and change the numbers for the new one.

@media only screen and (min-width: 641px) { //change to adjust for a different screen width
	.header-menu {
      .header-menu-nav-folder {
        &:before {
          left: -9vw; //adjust this for left to right spacing for the star
        }
        .header-menu-nav-item a {
          //adjust these for the vertical spacing.
          margin-top: 1vw; 
          margin-bottom: 1vw;
      }      
  }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Link to comment

@daniellenoakes might have to tweak it a but but this should target it. Change your colors and things to match whatever you need!

.header-menu {
    .header-menu-cta .btn {
        font-size: .9em !important;
        font-family: 'montserrat' !important;
        border: none !important;
        font-weight: 600 !important;
        letter-spacing: .2em !important;
        border-bottom: 1px solid #19191e !important;
        color:#19191e !important 

        &:hover {
            background-color: transparent;
            color: #81919f !important;
            border-bottom: 1px solid #81919f !important
        }
    }
}

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

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.