[candiecaine103]

I’m trying to figure out how to change the active page color in my sidebar. I changed my overall theme color to be purple, but the sidebar is still in the default blue color. How can I change this so that it matches my site design?

Also, I noticed the arrow isn’t spaced out next to the words like it looks on the demo content.

I’ve attached a screenshot of the page so that you can see what I am talking about. Any help will be greatly appreciated.

Thanks.

Reply

[Anonymous]

Kindly provide your website url so that we can take a closer look at it.

Reply

[candiecaine103]

The website hasn’t been launched yet, so I don’t have an active link for the page. I’m referring to the sidebar in the screenshot under “Meet Our Leaders”. I want the active page link (Supt. DeWayne Tillman) to be in purple, instead of the blue. That was the default color, but I changed the theme to the same purple as the heading bar.

Reply

[Anonymous]

Paste the below code in your theme options Hopes > Styling > Custom CSS

.sub_nav li.current_page_item > a { 
    background-color: #800080; // Choose your color
}
.sub_nav li.current_page_item > a, .sub_nav li.current_page_item > a:hover {
  background-color: #800080; // Choose your color
}

Reply

[Anonymous]

We are setting this topic to be resolved. If you wish to update this topic please reply here instead of creating another topic.

Reply

[CatMissile]

I am having the same issue as the original poster above. I tried using the custom CSS in the fourth post down to see if I could make a change, but that doesn’t seem to work – it had no effect. Menu remains blue, and the arrow is “cramped” up against the actual menu item text.

Here’s the link to our dev site so you can see what I mean: dev site

• This reply was modified 7 years, 2 months ago by CatMissile.

Reply

[Fem]

Paste the below code in your custom css

#menu-youth-kids li.current_page_item > a {
background-color: #bc602b;
}
#menu-youth-kids li.menu-item > a {
padding-left: 25px;
}

• This reply was modified 7 years, 2 months ago by Fem.
• This reply was modified 7 years, 2 months ago by Fem.

Reply

[CatMissile]

Thank you. I pasted that CSS in and, while the padding-left for text works, the blue color still remains for current_page_item.

Reply

[Fem]

You have to add important with the background-color property. Check the below code.

#menu-youth-kids li.current_page_item > a {
background-color: #bc602b !important;
}

• This reply was modified 7 years, 2 months ago by Fem.

Reply

[CatMissile]

That worked. Thanks!

Reply