Archived

This topic is now archived and is closed to further replies.

  • 0

Nav classic background colours


Question

Posted · Report post

How do I remove all background colours from nav classic so that the links just appear on a transparent background for all states? I'd like my background to show through.

http://mylondontherapist.com

Thanks.

John

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

That's the one that worked, James - thanks. Note: I added that code to the previous one, and didn't replace it.

Thanks,

John

Share this post


Link to post
Share on other sites

Posted · Report post

Hello aerta 

 

You can do this using Custom CSS - using Firebug or your browsers built-in web dev tools and inspect the navbar to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/ 

Share this post


Link to post
Share on other sites

Posted · Report post

Of course, Firebug is always my first port of call - but most of the time I find it impossible to use as it's very hit-and-miss. Alas, I can't find the code which relates to the nav classic background, hover and live state, all of which I'd like to make transparent.

If anyone can help me here I'd be much obliged.

Share this post


Link to post
Share on other sites

Posted · Report post

Hello aerta 

 

If you show us some things you have tried we might be able to suggest what to change. 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

 

Try the below, there are different classes for the hover and active effect on the pages.

 

#page .main-nav .current-menu-ancestor a, #page .main-nav li.current-menu-ancestor ul a, #page .main-nav li.current_page_item a, #page .main-nav li.current-menu-item a, #page .main-nav li.current_page_parent a, #page .sf-menu li li, #page .sf-menu li li li, #page .main-nav li:hover, #page .main-nav .current-page-ancestor a, #page .main-nav li.current-page-ancestor ul a {
    backgroundnone repeat scroll 0 0 transparent;
}

 

 

Ps, if you notice the thread is marked answered or resolved then best to start a new thread so a moderator can advise. Unfortunately after it's marked answered we don't always see the comments following the answered one in the new comments/questions queue, so it could get missed. Just to be safe etc.

 

However, I have unmarked this post answered so if you respond on this one we will see any new comments :-)

Share this post


Link to post
Share on other sites

Posted · Report post

I can find

<ul id="menu-nav" class="main-nav">

and

<nav id="nav_row" class="main_nav fix">

but can't find where to change the background colours of the navigation links

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent, glad that worked John :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, that code looks like html in the left side of the inspector, you need to look into the css on the right side of the inspector.

 

It seems like you've managed to resolve this, I can't see any background colors showing through on the main navigation on your site at the moment.

 

Screenshot - http://screencast.com/t/5Hl1gOsz

Share this post


Link to post
Share on other sites

Posted · Report post

No, I haven't solved it. Here's the site:

http://mylondontherapist.com

There's still solid white behind the nav links.

Am looking in Firebug CSS - which bit of code refers to the nav background colours?

Any help much appreciated!

Share this post


Link to post
Share on other sites

Posted · Report post

Try

 

#page .sf-menu li a, #page ul.sf-menu a:focus, #page .sf-menu a:hover, #page .sf-menu a:active, #page .main-nav a {
    backgroundnone repeat scroll 0 0 transparent;
}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Perfect! Thank you so much.

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome

Share this post


Link to post
Share on other sites

Posted · Report post

Have since discovered that this fix didn't work, James, as white background appears under nag links on hover and live states:

http://mylondontherapist.com

any further thoughts on how I can remove white background?

Share this post


Link to post
Share on other sites

Posted · Report post

Hello aerta 

 

Couldn't get to your site as there is authentication required 

Share this post


Link to post
Share on other sites

Posted · Report post

authentication now removed. Thanks.

Share this post


Link to post
Share on other sites