Jump to content

Customise sizing CSS for individual hamburger nav links

Recommended Posts

Site URL: https://www.neu21.com/

Hi there,

I want to customise the size of individual hamburger nav links in my website's navigation.

Please note that we've intentionally used custom code to force the hamburger nav on desktop, as we prefer it across all devices.

I've also used a bit of custom code to change the sizing, spacing, etc. of the current links as they are.

We want is to reduce the size & spacing of only the service page nav links, to make them feel like "secondary" pages in the nav:

- Agility & Ways of Working
- Leadership
- Innovation
- Product & Service Design
- Artificial Intelligence

I've tried my best to target the exact HREFs, classes, etc. and push it with !important, but no luck.

If anyone can help with this that'd be great!

 

Screenshot 2024-10-01 at 10.17.25 AM.png

IMG_34D453AF5A6A-1.jpeg

Link to comment
  • Replies 1
  • Views 465
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @CharlieHNZNeu21. Please add the following code and see how it goes. Also, check the attached screenshot to see if that’s what you’re looking for:

    .header-menu-nav-wrapper .container:nth-child(3) a,
    .header-menu-nav-wrapper .container:nth-child(4) a,
    .header-menu-nav-wrapper .container:nth-child(5) a,
    .header-menu-nav-wrapper .container:nth-child(6) a, 
    .header-menu-nav-wrapper .container:nth-child(7) a {
      
        font-size: 15px !important;
    }


.header-menu-nav-wrapper .container:nth-child(3) a{
 margin-top: 50px !important;
}

.header-menu-nav-wrapper .container:nth-child(8) a{
 margin-top: 50px !important;
}

Do let me know how it goes!

Screenshot 2024-10-01 at 12.43.02.png

- Answered by Iuno from sparkplugin.com

forumsignature-recommendedcopy2.png.0579645eb1430dc7c1059541dc6456c6.png

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.