Jump to content

Custom code on folder drop down navigation menu

Recommended Posts


I have customized my navigation to include color and font changes on hover. I have set the active links to be bold. The issue that I am having, is that I have a folder with links inside. Once I select one of those links, all of the links are bold instead of just the active link.

I have included 3 images for easy viewing.

  1.  An image activating the dropdown by hovering over the Work link from the home page. The folder links show correctly. 
  2. An image hovering over the links within the folder dropdown. The text style and the background act as expected.
  3. An image of the selected link from the previous image. As you can see, all of the text is bold. I am wanting only the active link to be bold.

I do have my site live so you can see what is happening. https://www.sonyacollins.me/

Here is the code that I am using. I feel like the code is way overkill, but it just wasn't working at all without going in depth. If you have any ideas to clean it up, I'm def game.

//---START Nav Style Color
.header-nav .header-nav-item--folder .header-nav-folder-content {
padding: 0!important;text-align: center!important;right: -3.1em!important;
//---End Nav Style Color

//---START Remove line from Nav
.header-nav-folder-item--active .header-nav-folder-item-content {background-image: none!important;
//---End Remove line from Nav

//---START Remove line within menu folder
.header-nav-item--active a {background-image: none!important;font-weight: bold!important;color:#fff!important;
//---End Remove line within menu

//---START Adjust Padding on medu folder
.header-nav-folder-item {min-width: 20px!important;padding:10px 10px!important;}
//---End Adjust Padding on medu folder

///---START Folder NAV hover
.header-nav-folder-item:hover {background: #8da8bb!important;font-weight: bold!important;
//---End Folder NAV hover


Screenshot 2023-11-16 at 10.00.09 PM.png

Screenshot 2023-11-16 at 10.00.27 PM.png

Screenshot 2023-11-16 at 10.01.09 PM.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Change this CSS code

.header-nav-item--active a {
    background-image: none !important;
    font-weight: bold !important;
    color: #fff !important;

to this

.header-nav-item--active>a, .header-nav-folder-item.header-nav-folder-item--active * {
    background-image: none !important;
    font-weight: bold !important;
    color: #fff !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.