Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Solved
Wordpress - CSS - Target a menu for current page.
Posted on 2016-08-20
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):
I tried to simply add the "Color: Blue;" to the list, but... nothing
Could someone, please, help?
Thank you!
Shane
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%;
}
I tried to simply add the "Color: Blue;" to the list, but... nothing
Could someone, please, help?
Thank you!
Shane
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3
2-
2
- +1
8 Comments
This is not a PHP question. Please use the Request Attention link and ask a moderator to remove the PHP Zone, thanks.
Active today
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.
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.
Active today
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/
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
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;
}
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
Use this code. Change color as per your need.
#menu-secondary-items li.current_page_item a {
background-color: blue !important;
}
Featured Post
Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.
See why 2/3 of Plesk servers use it.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and
how to set up WordPress to automatically place Ads in Sidebars.
This will be demonstrated using a Windows 8 PC.
Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress
Website.
This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used.
Go to your WordPress login page. This will look like the following: myw…
Suggested Courses
Course of the Month11 days, 19 hours left to enroll
730 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.