/    Sign up×
Community /Pin to ProfileBookmark

Header, Footer and Submenu Color Customizations

Copy linkTweet thisAlerts:
Jun 28.2022

Hi!

I’d like to make some CSS color customizations with the header, footer, and submenu. I’d like to change color of the header where the phone number is located, the footer and the submenus to from the greens to #0d0d0d. What code would I need to accomplish that? For example, I tried the following line of code for the header but it didn’t work

.header bar {
background-color: #000000;
}

And also if anyone is wondering, I already posted in support of the theme over 5 days ago, but they havent responded. Any and all direction would be welcome, thank you!

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertJun 28.2022 — You can set theme in CSS using [data-theme]{} (Non-WP :-) )

https://jsfiddle.net/pr65a7zk/3/
Copy linkTweet thisAlerts:
@gdon17authorJun 28.2022 — Can you please explain how that works? I'm not sure I understand how that can change the colors to what I need them to be in a few spots. I always just thought the right custom css codes would work.

Oh and here's link to the site if that helps https://nmm.vwk.mybluehost.me
Copy linkTweet thisAlerts:
@SempervivumJun 28.2022 — Check if this CSS does the job:
``<i>
</i>.header-top, footer, footer *, ul.sub-menu {
background-color: #0d0d0d !important;
}<i>
</i>``
Copy linkTweet thisAlerts:
@gdon17authorJun 29.2022 — Ok that part worked thank you!

Now how can I get the hover color of the sub-menu to be #E1C736 and the text of the main navigation menu items to stay #0d0d0d on hover?
Copy linkTweet thisAlerts:
@SempervivumJun 30.2022 — Try this CSS:
``<i>
</i>ul.sub-menu li a:hover {
background-color: #E1C736 !important;
}<i>
</i>``
Copy linkTweet thisAlerts:
@vijaykk04777Jun 30.2022 — Looking For [Partitions In UAE](https://www.yellowpages.ae/subcategory/interior-designing/partitions/5ecb70c4ebee8a7379acd0f7)? Visit Our Website yellowpages.ae And Find Leading Partitions In UAE
Copy linkTweet thisAlerts:
@gdon17authorJun 30.2022 — Great that worked! Thank you! The only thing is that the next of the main navigation items are still changing to green. I tried a few different lines of code to keep that color #0d0d0d but they didn't work including this one"

.nav a.hover {<br/>
color: #0d0d0d<br/>
!important;<br/>
}

What am I missing?
Copy linkTweet thisAlerts:
@SempervivumJun 30.2022 — You can override the color change by this CSS:
``<i>
</i>.gb_nav_menu ul li a:active, .gb_nav_menu ul li a:hover {
color: #0d0d0d !important;
}<i>
</i>`</CODE>
In your code you used a normal class (preceded by dot), however you have to use a colon for the pseudo class <C>:hover</C>.<br/>
Additionally there is no class <C>.nav</C> but a tag name only, therefore you will have to omit the dot here. When I modify your CSS accodingly, it works too:
<CODE>`<i>
</i>nav a:hover {
color: #0d0d0d !important;
}<i>
</i>``
For further info about CSS selectors read here:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Copy linkTweet thisAlerts:
@gdon17authorJul 05.2022 — Your last line of code worked perfectly! Thank you very much!
×

Success!

Help @gdon17 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...