The Nav Bar at the top doesn't respond to CSS

Have you tried this CSS;

#nav ul.sf-menu {
 background: none;
}

Ah, Andrew it was you who helped me with my first code and that’s the one I entered. I have tried it again but nothing,

I have already –

#nav ul.sf-menu,#nav-top ul.sf-menu {
width:100%;
background-color:#F0EDEF;

but is this only for the bottom navigation bar? My one at the tops responds to this in preview but not when I save changes

Sometimes when CSS isn’t responding, it only appears so because the browser has cached/saved an older version of the page to improve page loading time.

Can you clear your browser cache to make-sure this is not the issue?

I’m sorry, I mistaked your ‘top’ navigation for the one that says

Blog Affirmations  Personal Development  Spirituality  Travel  Art And Creativity

And your ‘bottom’ navigation for the one right at the bottom of the page, in your footer (not a navigation oops).

You could add

#nav-top,
#nav-top ul li {
 border: 0;
}

#nav-top ul.sf-menu {
 background: none;
}

Hi Eande,

It looks as though the nav is taking the style but its your li and li a elements that picking up the borders and white backgrounds

change :

#nav-top ul li {
    border: 1px solid #444444;
}

to

#nav-top ul li {
    border: none;
}

and

#nav-top a.current, #nav-top a.current:visited, #nav-top a.current:hover, #nav-top a.current:active, #nav-top li a:hover, #nav a.current, #nav a.current:visited, #nav a.current:hover, #nav a.current:active, #nav li a:hover {
    background: none repeat scroll 0 0 #555555;
    color: #EEEEEE;
}

to

#nav-top a.current, #nav-top a.current:visited, #nav-top a.current:hover, #nav-top a.current:active, #nav-top li a:hover, #nav a.current, #nav a.current:visited, #nav a.current:hover, #nav a.current:active, #nav li a:hover {
    background: none;
    color: #000;
}

Hope this helps guys

Sorry and

#nav-top ul li a, #nav ul li a {
    background-color: #FFFFFF;
    color: #444444;
}

to

#nav-top ul li a, #nav ul li a {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
}

Sorry Andrew,

I must have been mid post whilst you were posting that. Dont want to confuse anyone ??

There’s nothing wrong with comments which fulfill and reinforce the solution, J.

Thank you both very much! I have since tried all the codes and updated them, and I’m almost at the effect I was looking for. However now I have a ‘bar border’ that’s transparent that runs behind the grey.
Where will I be able to add in a font colour change in these fonts, I seem to have so codes now!

am I also able to change the background colour of the top bar to transparent? I’m not seeing which code applies to which bar?

I knew that one was coming hehe ?? change :

#nav-top, #top-bar-right-spanel {
    margin: 0 auto;
}

to

#nav-top, #top-bar-right-spanel {
    border: none;
    margin: 0 auto;
}

For the “bar border”, if you don’t want it, can you add;

#nav-top {
 border: 0;
}

For the colour, you’ll need to override the previous style by using these selectors;

#nav-top a.current,
#nav-top a.current:visited,
#nav-top a.current:hover,
#nav-top a.current:active,
#nav-top li a:hover {
 color: #etc-your-color.
}

Thank you both again! ?? ??
However I still have the grey bar on the top nav, (I wanted plain white background with purple font int ariel) and the colour of the font is only when I hover over it.

However I still have the grey bar on the top nav

Try

#nav-top ul.sf-menu {
 background: none;
}

and the colour of the font is only when I hover over it.

Try

#nav-top a.current:hover,
#nav-top li a:hover {
 color: #etc-your-color;
}