Jump to content

Color difference between active and inactive pages in dropdown

Recommended Posts

I'm working on customizing a new site that is not live yet. I've added some custom CSS code to customize the menu and the dropdown. I ALMOST have it how I would like for it to look with one exception. I have changed the color of the active page link so it is easier for site visitors to know which page is active. The issue I've come across is in the dropdown menu. 

The example below is from the 'Call' page of the website, which is nested under the 'Conference' menu item in the dropdown. I would like 'Call' and 'Conference' to be the only pages in blue and the remaining pages in the dropdown menu to be in gold color, the same way the inactive dropdown menu is. I've attached images of both dropdowns as well as the snippet of the CSS code I've added to get me this far for reference. Is this possible?

.header-nav-folder-title {
  pointer-events: none;
}
//Stylized Folder Dropdown Menu
@linkBGColor: #e49b5a;
@linkTextColor: #fdf0d6;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0!important;
  .header-nav-folder-item a {
    padding: .5em 1em!important;
  }
  .header-nav-folder-item a:hover {
    background: @linkBGColor!important;
    color: @linkTextColor!important;
  }
}
// Adjust folder dropdown width
.header-nav-folder-content {
  min-width: 90px !important;
}

/* dropdown arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

.header-nav-folder-content{border: .5px solid #e49b5a}

.header-nav-folder-content{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}

.header-nav-folder-content a {border-bottom:.5px solid #e49b5a}

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
  color: #2a3492 !important;
}

.header-nav-item--active a { 
background-image: none!important;
  color: #2a3492 !important;
}

 

Screenshot 2024-03-06 at 11.32.26 PM.png

Screenshot 2024-03-06 at 11.32.37 PM.png

Link to comment
  • Replies 2
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

4 hours ago, DDCreative said:

I'm working on customizing a new site that is not live yet. I've added some custom CSS code to customize the menu and the dropdown. I ALMOST have it how I would like for it to look with one exception. I have changed the color of the active page link so it is easier for site visitors to know which page is active. The issue I've come across is in the dropdown menu. 

The example below is from the 'Call' page of the website, which is nested under the 'Conference' menu item in the dropdown. I would like 'Call' and 'Conference' to be the only pages in blue and the remaining pages in the dropdown menu to be in gold color, the same way the inactive dropdown menu is. I've attached images of both dropdowns as well as the snippet of the CSS code I've added to get me this far for reference. Is this possible?

.header-nav-folder-title {
  pointer-events: none;
}
//Stylized Folder Dropdown Menu
@linkBGColor: #e49b5a;
@linkTextColor: #fdf0d6;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0!important;
  .header-nav-folder-item a {
    padding: .5em 1em!important;
  }
  .header-nav-folder-item a:hover {
    background: @linkBGColor!important;
    color: @linkTextColor!important;
  }
}
// Adjust folder dropdown width
.header-nav-folder-content {
  min-width: 90px !important;
}

/* dropdown arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

.header-nav-folder-content{border: .5px solid #e49b5a}

.header-nav-folder-content{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}

.header-nav-folder-content a {border-bottom:.5px solid #e49b5a}

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
  color: #2a3492 !important;
}

.header-nav-item--active a { 
background-image: none!important;
  color: #2a3492 !important;
}

 

Screenshot 2024-03-06 at 11.32.26 PM.png

Screenshot 2024-03-06 at 11.32.37 PM.png

Can you share the site URL? 

Follow the instruction 

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

@Web_Solutions This site is still in development, but the site is: https://dinosaur-turbot-2kt9.squarespace.com/ and the pw is: Ddc2420

Related, but not 100% the same. I added a code injection to make the main folders of the drop-downs clickable, but I would like them to also do the color change. I'm not sure if that is possible since I did the code injection rather than custom CSS code.

Thank you for looking at it!

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.