Jump to content
aerta

Nav classic background colours

Recommended Posts

aerta    5
aerta
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
greenfly    230
greenfly

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/ 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
greenfly    230
greenfly

Hello aerta 

 

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
James B    436
James B

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;
}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
greenfly    230
greenfly

Hello aerta 

 

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
aerta    5
aerta
authentication now removed. Thanks.

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
James B    436
James B

Excellent, glad that worked John :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


×