Jump to content
Sign in to follow this  
boldbelvoir

Changing menu colour

Recommended Posts

boldbelvoir

I just upgrade my site (www.justbeermicropub.biz) to v2.1 and now the colour of my menu has changed and is not readable against the black backround image I have. What is the custom CSS I need to force the colour of my menu font? Also, the widget titles in my footer have changed and not as readable as they were. Can I change these with custom CSS?

Share this post


Link to post
Share on other sites
catrina
Please add this CSS: [code]nav#nav_row .main_nav ul#menu-menubar ul.main_nav li#menu-item {color: #fff;} footer#footer h3.widget-title {color: #fff; font-size: 15px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
boldbelvoir
Thanks, but nothing changes except the colour of the footer background. Menu is still invisible. Edit... I have worked around by changing my background image, but it is so annoying that a minor update breaks my site and I have to rework. I preferred the 1.5.x verion colour options. Far more control.

Share this post


Link to post
Share on other sites
Danny
Hi, Is this now resolved ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
boldbelvoir
No, I have changed my bg image as a workaround, but still need to know how to control the menu font colour with custom CSS. The advice given above did not work. Thanks.

Share this post


Link to post
Share on other sites
Jackey
What color would you like the menu text to be?

Share this post


Link to post
Share on other sites
Jackey
Does this help? [code]#menu-menubar.main-nav .menu-item a { /* CSS for the default button */ color: white; }[/code] [code]#menu-menubar.main-nav .menu-item a:hover { /* CSS for the hover button */ color: red; }[/code] [code]#menu-menubar.main-nav .menu-item a:active { /* CSS for the active button */ color: blue !important; }[/code] [code]#menu-menubar.main-nav .menu-item a:focus { /* CSS for the focus button */ color: yellow !important; }[/code] [code]#menu-menubar.main-nav .current-menu-item a { /* CSS for the button of the current page */ color: #444 !important; }[/code]

Share this post


Link to post
Share on other sites
Danny
Jackey's code above should work, so I have accepted his answer, should you require further assistance. Simply reply to this topic and it will be tagged as unresolved again.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
boldbelvoir
Sorry for my late reply. That works. Thank-you so much for your help.

Share this post


Link to post
Share on other sites
Danny
No problem, happy to help!

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×