Community Forums › Forums › Archived Forums › Design Tips and Tricks › Nav Menu – Atmosphere
- This topic has 14 replies, 2 voices, and was last updated 7 years ago by
designerwriter.
-
AuthorPosts
-
September 13, 2016 at 6:51 pm #193121
designerwriter
MemberI have having this weird issue where the over color over INVESTOR won’t disappear. StudioPress told me that this is the code in question:
.nav-primary li.highlight > a {
background-color: #fff;
border: 1px solid #333;
margin-left: 15px;
padding-left: 15px;
padding-right: 15px;
}
.nav-primary li.highlight > a:hover, .nav-primary li.highlight > a:focus {
background-color: #34313b;
border: 1px solid #34313b;
color: #fff;
}So I adjusted the code to this:
.nav-primary li.highlight > a {
background-color: #fff;
border: 1px solid #fff;
margin-left: 15px;
padding-left: 15px;
padding-right: 15px;
}.nav-primary li.highlight > a:hover,
.nav-primary li.highlight > a:focus {
background-color: #fff;
border: 1px solid #e4e4e4;
color: #fff;I do want the light grey outline to show up on the hover but not the green background in the box. Can someone tell me how to fix this please? The job is due tomorrow. Thanks in advance!
http://dev.qmcresources.com/September 13, 2016 at 8:10 pm #193122Christoph
MemberHi,
you have to use !important after the :hover, :focus values because the green background color is defined in an inline style.
September 13, 2016 at 8:18 pm #193124designerwriter
MemberYou mean I have to write code? That’s why I bought the theme. Where is this inline code...that big chunk of code at the beginning? Can you post the block of code please and where exactly this green hex color is so that I can change it? Thank you Christoph.
September 13, 2016 at 8:33 pm #193129Christoph
MemberNo, you have to add !important after the code you said you already changed.
.nav-primary li.highlight > a:hover, .nav-primary li.highlight > a:focus { background-color: #fff !important; border: 1px solid #e4e4e4; color: #fff;
You will have to change color to something other than white.
September 13, 2016 at 8:39 pm #193132designerwriter
MemberOk but how will this change the green color and why can’t I leave it as white? I don’t want the color in the hover button to show up at all. I just want the letters to change to green and the button light grey outline.
September 13, 2016 at 8:52 pm #193135designerwriter
MemberI put important there but the color is still showing up in the box for INVESTOR. Why is it showing up on this link and nowhere else? Very strange.
September 13, 2016 at 9:02 pm #193136Christoph
MemberI'm just going from the code you have posted.
If you change the background-color to white and the color is white, you will see nothing.You either haven't changed the code or you have to empty (plugin / hosting / CDN) caches:
http://prntscr.com/chrcjwThe green background is showing because you added the custom css class "highlight" to that menu element.
September 13, 2016 at 9:14 pm #193137designerwriter
MemberI emptied the cache. Still see it. Yes I did add highlight to that menu element. Let me change it brb.
September 13, 2016 at 9:21 pm #193138designerwriter
MemberI took off the highlight on all of them. I even deleted the INVESTORS widget and added another one just to make sure but it’s still there. I don’t see it all of the other ones.
September 13, 2016 at 9:23 pm #193141designerwriter
MemberShould I get rid of li.highlight then? I feel so dumb. lol
September 14, 2016 at 12:25 am #193145designerwriter
MemberI changed the color on the supposed menu to the grey. It did take on INVESTORS but not on the other buttons.
September 14, 2016 at 7:41 am #193153Christoph
MemberWell,
you didn't use !important after the background-color: http://prntscr.com/chwzcaIf you don't want the highlight class applied, remove it from the menu item at Appearance - Menu.
September 14, 2016 at 9:26 am #193156designerwriter
MemberNone of the places where I put !important beside the background worked. I went into the Editor and searched for #024731 on both CSS pages and nothing showed up. The ONLY thing that worked was that I deleted the damn INVESTORS page and created a new one! This worked. I figured since that color was not showing up anywhere, deleting the page was the last resort. π I took the !important off of the 3 places where I put it because that code did not have an effect.
September 14, 2016 at 9:44 am #193158Christoph
MemberLOL
Glad you found a solution that worked.
Deleting a page to delete a menu item is sort of a nuclear solution but hey...For future reference, you won't find an inline style in any style.css. The inline styles were most likely created when you made changes in the Customizer.
September 14, 2016 at 10:12 am #193160designerwriter
MemberLOL. Thanks for your help. π Yes when I get angry, I get surprisingly more focused. Thank you for this piece of information (For future reference, you won't find an inline style in any style.css. The inline styles were most likely created when you made changes in the Customizer.) because I couldn’t figure out WHY I wasn’t seeing the color you showed me esp since I had changed that color to a darker green so I applied a different number.
Sometimes you have to “go nuclear” to get the job done when all else fails. There is more than one road to CSS Nirvana. Ha ha ha!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.