Support » Themes and Templates » Navigation Background Missing

  • kingsdarloweb

    (@kingsdarloweb)


    I have a problem with my navigation menu where the background of the sub-item for the current selected page is transparent and so makes the text impossible to read on some pages.

    I want to give it a simple background of a grey or black which will go with my theme but can’t find why it is doing this or how to change it.

    My site is at kingsdarloweb.byethost17.com
    CSS: http://kingsdarloweb.byethost17.com/wp-content/themes/abstract3/style.css
    Theme: Abstract 3

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    Forum Moderator

    I can;t see any problem with the nav bar on your site.

    kingsdarloweb

    (@kingsdarloweb)

    Go, for example, to http://kingsdarloweb.byethost17.com/downloads then hover over the Resources & Training tab and you’ll see the background missing on “Downloads” until you hover over it.

    Thanks for looking!

    MaddTechWF

    (@maddtechwf)

    You need to set the background for you selected menu item to be a certain color.

    kingsdarloweb

    (@kingsdarloweb)

    Yep but I can’t find where on the CSS that is…If anyone can tell me what part of the CSS it should be on I will now how to add it.

    Thanks!

    esmi

    (@esmi)

    Forum Moderator

    Add a background color to:

    .artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span {
        color: #F5F5F5;
        font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Sans-Serif;
        font-weight: normal;
        line-height: 25px;
        text-align: left;
        text-decoration: none;
        text-indent: 5px;
    }
    kingsdarloweb

    (@kingsdarloweb)

    That’s half solved it, thank you!

    I know have a problem when hovering over a sub-item. It seems the class I just added the colour too also does the ‘text box’for the other sub-items so when hovered over and the background colour changes it doesn’t match.

    Hover over an item and you’ll see what I mean better than I can explain it!

    esmi

    (@esmi)

    Forum Moderator

    Try using the same background color in:

    .artmenu ul li:hover > a {
        background-position: 0 -25px;
        border-color: #595959;
        color: #F2F2F2;
    }
    kingsdarloweb

    (@kingsdarloweb)

    Doesn’t seem to have any effect.

    Only logical solution I can think off is to remove the change of colour when on the hover but that feels like a shame aesthetically.

    Any more ideas?

    esmi

    (@esmi)

    Forum Moderator

    Try amending the background in:

    .artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span {
        background-color: #595959;
        color: #F5F5F5;
        font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Sans-Serif;
        font-weight: normal;
        line-height: 25px;
        text-align: left;
        text-decoration: none;
        text-indent: 5px;
    }
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Navigation Background Missing’ is closed to new replies.