Announcement

Collapse
No announcement yet.

Customise navbar home page menu tab with image instead of text

Collapse
This topic is closed.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Customise navbar home page menu tab with image instead of text

    Hi. A client has asked if I can use an image for the home page tab on the main menu bar instead of the text "Home", similar to that on the Apple website http://www.apple.com/. I have added a css class "hometab" to the menu item in the custom menu, and uploaded an image into the Dynamik image uploader. I then tried adding CSS using ".hometab", ".hometab a", ".menu-primary .hometab" and various other ids/classes but the closest I can get is to place the hometab image behind the existing tab rather than replace it. Also I tried adding"display: none" to the class in an attempt to get rid of the "Home" text but that had the effect of removing the tab altogether.
    Can anyone help me to a) replace the normal tab background with the image and b) to remove "Home" text?
    Many thanks....

  • #2
    Can you give us a link to the site in question so we can see what you have?

    Comment


    • #3
      Hi. Yes - http://geamyone.fionastoreydesign.co.uk/
      Thank you

      Comment


      • #4
        This can get you started...

        Code:
        .menu-primary li.hometab a {
        background: url("images/your-image.jpg")center center no-repeat transparent;
        text-indent: -9999px;
        }
        You will need to adjust based on the image icons that you use, but that will at least target the homepage tab.

        Comment


        • #5
          Thank you Jared - that worked fine

          Comment

          Working...
          X