Jump to content


Photo
- - - - -

Nav classic background colours

Nav classic background colour

Best Answer aerta , 26 June 2013 - 07:59 PM

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

Thanks,

John Go to the full post


  • Please log in to reply
15 replies to this topic

#1 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 24 June 2013 - 05:14 PM

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.

Please Login or Register to see this Hidden Content



Thanks.

John

#2 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2469 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 24 June 2013 - 06:23 PM

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 - 

Please Login or Register to see this Hidden Content

 



#3 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 24 June 2013 - 06:33 PM

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.

#4 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2469 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 24 June 2013 - 06:52 PM

Hello aerta 

 

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



#5 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 24 June 2013 - 07:40 PM

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

#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 June 2013 - 09:52 PM

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 -

Please Login or Register to see this Hidden Content



#7 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 24 June 2013 - 10:02 PM

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

Please Login or Register to see this Hidden Content



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!

#8 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 June 2013 - 12:20 AM

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;
}

  • aerta likes this

#9 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 25 June 2013 - 06:39 PM

Perfect! Thank you so much.

#10 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 June 2013 - 08:37 PM

You're welcome



#11 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 26 June 2013 - 12:42 PM

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

Please Login or Register to see this Hidden Content



any further thoughts on how I can remove white background?

#12 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2469 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 26 June 2013 - 01:17 PM

Hello aerta 

 

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



#13 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 26 June 2013 - 01:28 PM

authentication now removed. Thanks.

#14 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 June 2013 - 07:32 PM

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 :-)



#15 aerta

aerta

    Super Member

  • Members
  • 140 posts
  • Country: Country Flag

Posted 26 June 2013 - 07:59 PM   Best Answer

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

Thanks,

John

#16 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 June 2013 - 09:14 PM

Excellent, glad that worked John :-)