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
Related
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'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
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.
I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)
As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it's been overidden, but I don't know what by...
If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I'd like to think I can code, but I just can't understand what's overiding the font colour.. I think it's line 73 of the new_menu_style.css file.
You should try adding this to the CSS:
.menu ul li:hover ul li a {
color: #ccc;
}
.menu ul li:hover ul li a:hover {
color: black;
}
The .menu ul li:hover a gets a higher weight than the other one, overriding it.
First: Do something about your code style. proper indentation makes a great effort to increase readability:
So here is a solution: add this to your css as these override the .menu ul li:hover a
.menu ul li:hover ul a {
color:#ccc
}
.menu ul li:hover ul li:hover a {
color:#000
}