I'm working on this Wordpress theme and I'm adding highlighted menus for the current pages using a darker color.
The thing is, I figured out how to highlight the current link, but when I navigate to the "Sample Page" (which is the one who have sub-menus), all the submenus listed get highlited as well. And I don't want that.
The URL -> http://experiencias.freeserver.me/
The CSS I added:
.nav .current-menu-item a{
color: #fff;
background-color:#bc3031;
}
I also tried this to see if it works, but it was not successful
.nav .sub-menu {
display:none;
}
try this
.nav .current-menu-item > a{
color: #fff;
background-color:#bc3031;
}
this will only highlight direct child not nested elements.
Related
I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
I got 2 current items on my web-site, the second is a section from home but i need to highlight only the first one, how can i do that? i added a class to the second menu item and tried to modify but it doesnt work. noob wordpress designer here. the site: https://www.crescentbun.testebossnet.ro/ any help would be apreciate.
Your class set is canceled because there is css from the theme overwriting it like:
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
color: #f4ab02!important;
}
And as you tried to set the CSS on li and there is a CSS applied on your a under the li the CSS is canceled.
So set your CSS like:
.aboutus span{
color: black;
text-decoration: none;
}
I just changed my WP theme to Twenty Twenty. I have one primary menu on my website at the top, I just have 2 links in this menu atm. And if I am on one of the pages from the menu, it underlines that link. I'd like to remove that feature.
Website link: http://eclairblock.com
At first I tried adding this additional CSS:
> .primary-menu-wrapper .primary-menu .current-menu-item {text-decoration: none;}
But it changes nothing, If instead of text-decoration: none
I add for example display: none , then the current page link in the menu disappears.
I also tried to add !important but it doesn't work since the current page is still underlined in the menu.
Finally, I tried to change the style-rtf.css file by removing .primary-menu .current_page_ancestor from this part:
.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current_page_ancestor {
text-decoration: underline;
}
What else can I try?
Thank you guys (and sorry for being a total css noob)
Your rule is being overridden by an existing rule that is more specific. Please try:
.primary-menu li.current-menu-item > a {
text-decoration: none;
}
Here's a guide about CSS specificity: https://www.w3schools.com/css/css_specificity.asp
I'm trying to make adjustments to the font colors in my wordpress navigation menu.
I have contacted the support team that created the theme (Cyberchimps), but since it is a free theme, they weren't in a position to offer much help other than to send me to a guide on CSS. I've done some CSS customization on other sites I have created, but this one is really giving me a hard time.
What I want to do is change the "current page" font color in the menu an orange, and make all other menu items white, instead of the grey they are now. I've tried using Firebug to find a solution, but had no luck with that either.Although it isn't critical, the grey is difficult to see, and I would prefer to change it.
Basically, I can't seem to locate which item controls the menu colors in the Stylesheet. If I could find that, I could make the adjustment easily (I think).
The website is http://rlsfind.com and any suggestions would be greatly appreciated.
For current menu item
.navbar-inverse .nav .active > a {
color: orange;
}
For other menu items
.navbar-inverse .nav > li > a {
color: white;
}
You should learn about using your browser's developing tools. It's usually an easy way to see what styles are being applied where. For Chrome, read here.
bootstrap.min.css Line 4201
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
color: #ffffff;
background-color: #111111
}
Change background color