Background colour of sticky header

Tagged: color, hover, menu, Navigation

This topic has 8 replies, 3 voices, and was last updated 4 years, 1 month ago by Maidmarion.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
November 23, 2017 at 9:49 am #22178

eurodolphin
Participant

I am planning to use this theme for the website of an amateur photographer. Can you tell me where I can find the CSS that controls the background colour of the sticky header?

November 23, 2017 at 10:56 am #22181

acmesupports
Participant

Hello eurodolphin,
Thank you so much for your interest in our theme. You can find css codes inside style.css file of theme root folder. Please check it.

Regards

November 23, 2017 at 3:30 pm #22201

eurodolphin
Participant

Thank you very much for replying so quickly. Before raising my question I had spent a lot of time looking for the CSS that determines this colour. I notice that it’s the same colour as the menu drop-downs. I found it in two CSS files: metabox.css (line 43: border: 3px solid #F88C00;) and style.css (line 3975: border-top: 18px solid #f88c00;). Neither of these is a background colour and removing both lines has no effect on my test website: http://www.eurodolphin.com/rb2/ So I’m hoping you can give me a slightly stronger clue as to where I might look. Many thanks in advance.

November 24, 2017 at 2:41 am #22230
acmesupports
Participant
Dear
Please add the below CSS codes on Appearance > Customize > Additonal CSS,
```
.site-header.fixed {
   background: red !important; 
}
```
Hope this help. Please change the color name as your need. If you don’t need any color, just make it none

Thank you
November 24, 2017 at 9:03 am #22236

eurodolphin
Participant

Many thanks again. I wanted to retain the transparency of the header because a solid one obscures part of the image. By looking at all the ‘site-header’ lines in style.css I found this on line 1895: ‘background: rgba(247, 142, 63, 0.3);’ The problem with this is that any colour is going to clash with some of the images. The answer, as I see it, is to make the header background grey. I have done this by changing to: background: ‘rgba(153, 153, 153, 0.3);’

November 26, 2017 at 3:22 am #22321

acmesupports
Participant

Thank you

October 28, 2019 at 11:35 pm #71959

Maidmarion
Participant

I wonder if I can continue this thread a little.
I have successfully added custom CSS to change the background color for the menu site-wide to an olive green color and retained the transparency. The menu text color is the default white which I want to retain. I have also managed to change the text color on hover ON THE HOME PAGE to #663300 (a shade of brown) and also the “currently selected” page to the same shade of brown. The code I used is this:
.main-navigation .current_page_item > a,
.main-navigation a:hover {
color: #663300!important;
}
HOWEVER, on all other pages/categories other than the Home page, the menu items become black on hover. Whilst this might be considered a subtle difference (black compared to brown) it’s driving me mad that I can’t fathom out the CSS to make the black become brown! It’s only the color on hover that I want to change. Can you help me with the correct CSS please?
Thanks very much.

October 31, 2019 at 11:49 am #72056

acmesupports
Participant

Dear Maidmarion,
If you can provide us your site URL, we will observe and can provide you with possible solutions.
Best Regards!

November 1, 2019 at 11:33 am #72099

Maidmarion
Participant

I’m so sorry, I was sure I’d let you know that I’d solved this. Maybe I wasn’t logged in at the time. Anyway, the problem was essentially that I didn’t know how to use the Inspector in chrome properly to show my the hover code. Once I found out how to do that, I was able to edit the CSS. For the benefit of anyone else having the same problem, the code I used was:
.not-front-page .header-wrapper .menu li a:hover {
color: #663300 !important;
}

Thanks for responding anyway. The site in question is still under development so I couln’t provide you with the URL.
Author

Posts