Jump to content

Overlay Menu Link Size and Spacing

Go to solution Solved by Beyondspace,

Recommended Posts

Posted

Hi, I have used the Squarekicker plugin to add an overlay hamburger menu to my site when viewed on desktop. I have a drop down menu inside 'Services' which has a lot of links. There are so many links that they fill the screen and you have to scroll down to see them all. 

Is there a way to alter the size and line spacing for the links inside the 'Services' drop down menu without resizing the links in the main part of the navigation menu. The main navigation link size is fine (as you can see in my screenshots) but when you click on services I would like to reduce the size and line height of these links with code.

Any help would be greatly appreciated.

Password: parttwo

Thank you,
Chris

Screenshot 2024-06-21 at 15.08.22.png

Screenshot 2024-06-21 at 15.08.29.png

  • Replies 4
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted
39 minutes ago, PartTwoDesign said:

Hi, I have used the Squarekicker plugin to add an overlay hamburger menu to my site when viewed on desktop. I have a drop down menu inside 'Services' which has a lot of links. There are so many links that they fill the screen and you have to scroll down to see them all. 

Is there a way to alter the size and line spacing for the links inside the 'Services' drop down menu without resizing the links in the main part of the navigation menu. The main navigation link size is fine (as you can see in my screenshots) but when you click on services I would like to reduce the size and line height of these links with code.

Any help would be greatly appreciated.

Password: parttwo

Thank you,
Chris

Screenshot 2024-06-21 at 15.08.22.png

Screenshot 2024-06-21 at 15.08.29.png

Can you share your URL so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

  • Solution
Posted
1 hour ago, PartTwoDesign said:

Hi, I have used the Squarekicker plugin to add an overlay hamburger menu to my site when viewed on desktop. I have a drop down menu inside 'Services' which has a lot of links. There are so many links that they fill the screen and you have to scroll down to see them all. 

Is there a way to alter the size and line spacing for the links inside the 'Services' drop down menu without resizing the links in the main part of the navigation menu. The main navigation link size is fine (as you can see in my screenshots) but when you click on services I would like to reduce the size and line height of these links with code.

Any help would be greatly appreciated.

Password: parttwo

Thank you,
Chris

Screenshot 2024-06-21 at 15.08.22.png

Screenshot 2024-06-21 at 15.08.29.png

You can try the following custom CSS

:not([data-folder ="root"]) .header-menu-nav-folder.header-menu-nav-folder--active .header-menu-nav-folder-content {
  display: block;
}

My testing page

image.thumb.png.60bab8ae62f1e2478cb006e38f43e59f.png

Note: set display: block to overwrite the display: flex 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

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.