WordPress.org

Ready to get started?Download WordPress

Forums

Navigation Background Missing (10 posts)

  1. kingsdarloweb
    Member
    Posted 3 years ago #

    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

  2. esmi
    Forum Moderator
    Posted 3 years ago #

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

  3. kingsdarloweb
    Member
    Posted 3 years ago #

    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!

  4. MaddTechWF
    Member
    Posted 3 years ago #

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

  5. kingsdarloweb
    Member
    Posted 3 years ago #

    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!

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    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;
    }
  7. kingsdarloweb
    Member
    Posted 3 years ago #

    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!

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    Try using the same background color in:

    .artmenu ul li:hover > a {
        background-position: 0 -25px;
        border-color: #595959;
        color: #F2F2F2;
    }
  9. kingsdarloweb
    Member
    Posted 3 years ago #

    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?

  10. esmi
    Forum Moderator
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic