Hello,
I would like to change the top menu bar text color. I used the below custom CSS, which changes the font but has no effect on the theme default text color, which is white. Would appreciate your help, thanks!
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 40px;
font-weight: 500;
font-size: 16px;
color: #f0a6ab;
position: relative;
float: left;
font-family: ‘Cormorant Unicase’, serif;
text-transform: none;
letter-spacing: 1pt;
}
hey there
Hope you are having a good day and thank you for your question
Please add this CSS in appearance - customize - additional CSS
#header .top-header {
background: black;
}
Thanks!
Colorlib Support Team
Hello,
Thanks for your reply. I figured out how to change the navigation bar font color, but out of curiosity - why change the header bar background to black? Does this piece of code somehow affect the font color too? I only really know a bit of css so the workings of how various codes link up is a mystery to me haha.
Thanks again
hey there
“but out of curiosity – why change the header bar background to black?” - Well, this is only example its more easy to understand for our customers where we used black color and what was changed, you can use any other color instead of black, just an example
is there anything else?
Ah thanks Yes I have another question. Upon checking my website on a bigger screen, I realised the feature images are cut off. Below is the css I used, with the height at 600px my feature images fitted the laptop screen, but of course setting a fixed height is very limited.
As the feature image seems to be a background image, just setting the background-size to 100% doesn’t seem to work when the feature image area has no content.
Is there a way to set the feature image height so it automatically shows the full height of the image on any screen size?
#header .bottom-header {
padding: 0;
height: 600px;
margin-bottom: 0;
}
Thanks!
Hi there,
Thanks for reaching out.
In relation to your question here, could you perhaps try installing this plugin (Regenerate Thumbnails – WordPress plugin | WordPress.org) and regenerate your images. Once this is done, check whether there are improvements in the display.
I hope this helps.
Best Regards,
Support.