Solved

Wordpress - CSS - Target a menu for current page.

Posted on 2016-08-20
8
104 Views
Last Modified: 2016-08-21
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
0
Comment
Question by:lshane
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 41763905
Are you sure that is the right link you provided?
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41763928
This is not a PHP question.  Please use the Request Attention link and ask a moderator to remove the PHP Zone, thanks.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 41763956
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:lshane
ID: 41763962
Sorry, Scott!!!

The link is:  www.thebargainwatcher.co


This one is a Wordpress site.


Thanks, Scott!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 41763966
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
 
LVL 13

Accepted Solution

by:
Abhijeet Rananaware earned 500 total points
ID: 41764370
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
 

Author Closing Comment

by:lshane
ID: 41764756
Hi, Abhijeet Rananaware.

That fixed it!

Thank you!!!
0
 
LVL 13

Expert Comment

by:Abhijeet Rananaware
ID: 41764842
Hi,

Welcome! :)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Location of Buttons 4 17
Help in good tutorials for PHP, HTML and CSS 6 40
Open iframe using jquery dialog box 13 38
AJAX Wordpress Not Reading Variable 2 28
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question