WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] The Nav Bar at the top doesn't respond to CSS (30 posts)

  1. Eande
    Member
    Posted 1 year ago #

    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/

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you tried this CSS;

    #nav ul.sf-menu {
     background: none;
    }
  3. Eande
    Member
    Posted 1 year ago #

    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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    You could add

    #nav-top,
    #nav-top ul li {
     border: 0;
    }
    
    #nav-top ul.sf-menu {
     background: none;
    }
  7. J
    Member
    Posted 1 year ago #

    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

  8. J
    Member
    Posted 1 year ago #

    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;
    }
  9. J
    Member
    Posted 1 year ago #

    Sorry Andrew,

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

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  11. Eande
    Member
    Posted 1 year ago #

    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!

  12. Eande
    Member
    Posted 1 year ago #

    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?

  13. J
    Member
    Posted 1 year ago #

    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;
    }
  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.
    }
  15. Eande
    Member
    Posted 1 year ago #

    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.

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  17. Eande
    Member
    Posted 1 year ago #

    The bar code worked perfectly thank you!

    However nothing happened to the font colour it's still black and when I hover over it turns my custom colour. At the moment I have this in code in my CSS stylesheet

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

    #nav ul li,#nav.continuous ul li,#nav ul ul li,#nav.continuous ul ul li,#nav ul li a,#nav.continuous ul li a,#nav a.current li a,#nav.continuous a.current li a {
    background-color:transparent;
    }

    #nav ul ul li,#nav ul ul li a,#nav ul ul li a:visited {
    background-color:#F0EDEF;
    }

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

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

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

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

    #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:#6939A8;
    }

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

    #nav-top a.current:hover,#nav-top li a:hover {
    color:#6939A8;
    }`

    but I'm not sure here where I can edit the font. I seem to have a thicker font on my top bar and ariel for the rest of the site.

  18. Eande
    Member
    Posted 1 year ago #

    Sorry I thought the code would come in a little box.

    Upon relflextion the hover cover is pretty nice that way. Can I find a place to only edit the font? To ariel and the colour grey?

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you want to change the colour of the font without hovering, try;

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

    For the font, does this work;

    #nav-top a {
     font-family: arial, san-serif;
    }
  20. Eande
    Member
    Posted 1 year ago #

    no. I also tried by adding the colour I wanted, i pasted

    #nav-top a {
    font-family:arial, san-serif;
    color:3D3932;
    }
    but nothing changed

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    Eande,

    Did you get your problem sorted? If so, mark the thread as resolved please :)

  22. Eande
    Member
    Posted 1 year ago #

    Thanks Andrew,

    I almost have.... Just an update, I was looking for more answers to change the colours of the fonts and I read online that sometimes CSS doesn't respond if you have minify enabled on CSS - which I did.

    I turned it off and the things I had edited via skinning options began to appear... So I can use both now, and I'll have a play around using both methods today.

    However, I haven't completely resolved the issue for CSS because every code I've placed in to change the colour and font of the post title and page title doesn't work, however it does allow me to centre the titles, which is a bit strange, as the font color and family are in the same bracket, don't suppose you could shed any light please?

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    What CSS have you tried for the fonts and colour?
    You may have posted it before in this thread, but can you repeat just to clarify?

  24. Sumit Singh
    Member
    Posted 1 year ago #

    use these selectors for title

    .title h1.posttitle a,
     .title h2.posttitle a { color: #code; font-family: whatever; }
  25. Eande
    Member
    Posted 1 year ago #

    Thank you both, Sumit, I jsut tried that one but it did not change anything. At the moment I have this.
    entry-header,.entry-header a {
    border-bottom:1px solid #336600!important;
    color:#6939A8!important;
    font-family:arial, san-serif;
    font-size:11px!important;
    font-weight:normal!important;
    text-align:center!important;
    text-decoration:none!important;
    }

  26. Sumit Singh
    Member
    Posted 1 year ago #

    This is working but your home page code does not have anchor tag inside the heading tag but it exist on single post.
    so you can try this css. no need for !important.

    #content h1.posttitle,
    #content h2.posttitle,
    #content h1.posttitle a,
    #content h2.posttitle a {
    border-bottom:1px solid #336600;
    color:#6939A8;
    font-family:arial, san-serif;
    font-size:11px;
    font-weight:normal;
    text-align:center;
    text-decoration:none;
    }
  27. Eande
    Member
    Posted 1 year ago #

    Wow Sumit!
    That's brilliant thank you. However now all my blog and page posts are underlined (except the homepage) Can I take this out?

    That sounds worrying though about my homepage? Need I change it?

    Thanks!

  28. Eande
    Member
    Posted 1 year ago #

    I've tried to take out the underlining of all my titles (except the welcome page as it doesn't appear) I tired to add:

    text-decoration:none!important;

    but nothing is working. They all remain with a line under the title. Is there anything more I can try please?

  29. Sumit Singh
    Member
    Posted 1 year ago #

    yes it was my mistake actually code should be like this

    #content h1.posttitle,
    #content h2.posttitle {
    border-bottom:1px solid #336600;
    color:#6939A8;
    font-family:arial, san-serif;
    font-size:11px;
    font-weight:normal;
    text-align:center;
    text-decoration:none;
    }
    #content h1.posttitle a,
    #content h2.posttitle a {
    color:#6939A8;
    font-weight:normal;
    text-decoration:none;
    }
    #content h1.posttitle a:hover,
    #content h2.posttitle a:hover {
    your style for hover
    }
  30. Eande
    Member
    Posted 1 year ago #

    Sumit.. Thank you! And thank you to everyone else who has helped me so much in this forum this effect for my site is exactly what I was looking for!

    These forums are wonderful!

Topic Closed

This topic has been closed to new replies.

About this Topic