Announcement

Collapse
No announcement yet.

Customising background image for home page tab on navbar

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Customising background image for home page tab on navbar

    Hi. I want to use a different background image for the home page tab on a navbar than for the other tabs, and use different images for active, inactive and hover to match the styling on the other tabs. I have managed to get a different background image to work by giving the tab a CSS class hometab on the custom menu and adding this code to Custom CSS in Genesis dynamic:
    .menu-primary li.hometab a {
    background: url("images/navbar-background_home_active.png") no-repeat transparent;
    }
    .menu-primary li.hometab a:hover {
    background: url("images/navbar-background_home_hover.png") no-repeat transparent;
    }
    However I don't know how to assign active and inactive. Can someone advise?
    The test site is at www.ahviolin.fionastoreydesign.co.uk

  • #2
    Active menu items (li) get a class "current-menu-item", so it should be something like

    Code:
    .menu-primary li.current-menu-item a
    And without that class for the others (Can´t test right now).

    Comment


    • #3
      Thank you - that helped and I got it sorted with this:

      .menu-primary li.hometab a {
      background: url("images/navbar-background_home_inactive.png") no-repeat transparent;
      }
      .menu-primary li.hometab a:hover {
      background: url("images/navbar-background_home_hover.png") no-repeat transparent;
      }
      .menu-primary li.current_page_item.hometab a, .menu-primary li.current-menu-item.hometab a {
      background: url("images/navbar-background_home_active.png") no-repeat transparent;
      }

      Comment

      Working...
      X