Wordpress - CSS - Target a menu for current page.

Hi!

Using Wordpress Theme, Eventum.

Trying to CSS it.

Having a hard time getting a "Current Page" menu item to change text/link color.


Please see the "Blog" page at:  www.thebargainwatcher.com
Click the "Blog" menu item, and it will take you to that page, and you will see the "Current" effect is making the tab white, but the entire menu text color is being applied to it (White-ish).

I want to make that "Resting/Current" menu text link color a different color, but... I can't seem to target it -- it seems to be getting overwritten, somehow.

I was able to apply the following code to the Custom CSS Editor in WP (This changed the little top border color to the Teal color):

#menu-secondary .menu > ul > li > a:hover:before,
#menu-secondary .menu ul li.current_page_item > a:before,
div#menu-secondary .menu li.current-menu-item > a:before,
.mega-menu ul.mega > li.current-menu-item >a:before,
.mega-menu ul.mega > li > a:hover:before {
	background: none repeat scroll 0 0 #31B6B9;
	content: #31B6B9;
	height: 4px;
	left: 0;
	position: absolute;
	top: -4px;
	width: 100%;
}

Open in new window


I tried to simply add the "Color: Blue;" to the list, but... nothing

Could someone, please, help?



Thank you!
Shane
lshaneAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
Abhijeet RananawareConnect With a Mentor Web & Mobile DeveloperCommented:
Use this code. Change color as per your need.

#menu-secondary-items li.current_page_item a {
    background-color: blue !important;
}

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you sure that is the right link you provided?
0
 
Ray PaseurCommented:
This is not a PHP question.  Please use the Request Attention link and ask a moderator to remove the PHP Zone, thanks.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Start Now
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ray, he mentioned Wordpress.  The link he provided is not a wordpress site.  There are themes you can buy that have both a wordpress and html version and there is a chance that may be the confusion but I don't recognize the design of that linked site as being one of those templates.  I think it was an error.

If it is pure html, we can easily help on the front end. If it is wordpress, there is always that possibility something is controlled in a plug in and may not be straight forward.  

I think we need to wait for shane to respond.
0
 
lshaneAuthor Commented:
Sorry, Scott!!!

The link is:  www.thebargainwatcher.co


This one is a Wordpress site.


Thanks, Scott!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Looking at the browser's dev tools, you can see the color is here.  You just need to change the rgb to what you want or convert to a hex color.  https://color.adobe.com/

HTML > BODY > DIV.supreme_wrapper > DIV.off-canvas-wrap > DIV.inner-wrap > DIV#container > DIV.menu-secondary_wpr > DIV.row > DIV> DIV.menu-container > NAV.wrap > DIV.menu > UL > LI > A {
    color: rgba(239,239,239,1);
    font-family: Crafty Girls;
    font-size: 18px;
}

Open in new window


Before you make changes to the css on the page, double check that the theme is controlling this.  

The documentation should be in your theme files.  I didn't see it online anywhere and you can file a support request with the theme Author https://themeforest.net/item/eventum-conference-event-wordpress-theme-/12943209/support
0
 
lshaneAuthor Commented:
Hi, Abhijeet Rananaware.

That fixed it!

Thank you!!!
0
 
Abhijeet RananawareWeb & Mobile DeveloperCommented:
Hi,

Welcome! :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.