Getting sub menus to match parent's css
-
On my blog I’ve been struggling to get my submenu in the main menu bar to look like the main menu (grey, then blue when scrolling etc) is there a simple way to get the CSS rules to match?
The blog I need help with is: (visible only to logged in users)
-
Hello,
I found some CSS rules that should fix your current layout problems.
For the menu background add this text to your CSS Customization:
.sf-menu ul li {
background-color: rgba(36, 36, 36, .07);
}The “rgba(36, 36, 36, .07) is the color and transparency that your main menu. It doesn’t look exactly the same because of the transparency. I thought that rgba(44, 29, 33, 1) looked like a good match for your menu bar.
for the text color and roll over links add this text.
.sf-menu ul a{
color: #ffffff;
}.sf-menu ul a:hover{
color: #1d6a8a;
}That should change your text to white, with a teal roll over.
Hopefully this solves your problems. Let me know if you have any questions. -
That’s absolutely great looks much better on the customizer. The background looks fine.
On the customizer when scrolled to the top the text is white and blue when hovered over and once scrolled down is grey but still goes blue when hovered over.
On the other hand when it’s live it looks slightly different, the text is always grey and only turns blue when scrolled to the top which is odd.
is there anyway for me to make sure the values I’ve put in translate correctly when they go live?
Hope this makes sense
-
Hi, the text goes grey due to an opacity change. Add the following to keep the text white when you scroll down.
.site-hero .site-hero-content { opacity: 1 !important; } -
-
Hmmm, that is strange. I just tried that code directly at Customize > CSS on your site and the “Ten Years of…” text still changes to blue on hover for me, but it remains white as you scroll when you are not hovering on it. Can you try it again, and if you didn’t, place the code at the very bottom of your custom CSS?
-
I’ve tried it again but to no avail. Most of the text turns blue when hovered apart from the text in the dropdown ‘INDIE50’ menu. The menu also stays grey when scrolling which is weird.
Thanks for your help!
-
Ok, can you confirm that we are talking about this site: http://blog.wegottickets.com/ ? Can you also let me know which browser/browser version you are not seeing the change in?
I don’t typically do this, but I’ve added the above code to your customizer at the very bottom of your custom CSS and saved. I’ve checked in Chrome, Safari and Firefox, and all three are showing the text staying fully white now when you scroll up and at all points it goes to your blue when hovered. Can you clear your browser cache and then view the site and try it?
-
-
Hi sorry for the late reply. I managed to get the text to be white but I’d like it to change blue when hovered. Is this possible?
-
Hi, when I hover “Ten Years of Field day…” it turn blue. I’ve checked in Safari, Chrome and Firefox. You have to have your mouse over the text for it to turn blue. If your mouse is only over the image, the text will not change color.
If that is not happening for you, can you try and clear your browser cache and then perhaps restart Firefox and see if that doesn’t help?
-
That bit turns blue but the dropdown submenu under INDIE50 parent doesn’t fit with those rules.
Best
-
Hi, in your custom CSS, change this
.sf-menu ul a:hover { color: #43a6cf; }to this
.sf-menu ul a:hover, .sf-menu ul a:focus, .sf-menu ul a:active { color: #43a6cf !important; }
- The topic ‘Getting sub menus to match parent's css’ is closed to new replies.
WordPress.com Forums 