WordPress.org

Support

Support » Themes and Templates » [Resolved] The Nav Bar at the top doesn't respond to CSS

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

  • I have had a wonderful CSS code inserted to customise the navigation bar below the header, but since adding a new nav bar above the header I simply cannot customise it.

    Suffusions options/skinning does nothing, except show when I add something into CSS and press preview. If I press ‘save stylesheet’ nothing changes either. I just want to let the top navigation bar look the same as the bottom one without the ugly grey background and boxes. I really can’t find anywhere that shows me why skinning doesn’t work and why my CSS isn’t responding?

    Could anyone help please?

    Thanks

    The site I’m working with is;

    http://evolveandexpress.com/

Viewing 15 replies - 1 through 15 (of 29 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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 🙂

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘[Resolved] The Nav Bar at the top doesn't respond to CSS’ is closed to new replies.
Skip to toolbar