Support » Themes and Templates » Menu images instead of text, including :active

  • Resolved davehakkens

    (@davehakkens)


    Hello

    I want to use images instead of text for my twentytwelve navigation.

    I found this code which works:

    #menu-item-322 a {
    	display: block;
    	background-image: url('http://www.davehakkens.nl/portfolio/images/layout/header/up_10.png');
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 74px;
    	text-indent: 9000px;
    }
    
    #menu-item-322 a:hover {
    	display: block;
    	background-image: url('http://www.davehakkens.nl/portfolio/images/layout/header/active_10.png');
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 74px;
    	text-indent: 9000px;
    }

    I also want the ‘active’ function
    so thought this would work.:

    #menu-item-322 a:active {
    	display: block;
    	background-image: url('http://www.davehakkens.nl/portfolio/images/layout/header/active_10.png');
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 74px;
    	text-indent: 9000px;
    }

    but it doens’t..
    anybody an idea on how to also ad the :active image when you are on the page itself?

    edit: this is the site i’m working on http://www.davehakkens.nl/blog/buy-work/

Viewing 15 replies - 1 through 15 (of 15 total)
  • Moderator Andrew Nevins

    (@anevins)

    Are you sure you want to use “:active”? I’ve replied to a similar thread in the past and the person thought it meant the page you are currently on, but CSS has its own rules on what it means its for. See http://www.w3schools.com/cssref/sel_active.asp .

    Ah, I also mean the page you are currently!
    I just want a different image so you can see you are currently viewing that page.
    What would be another option to make this?

    Are you using a Child Theme?

    yes

    Moderator Andrew Nevins

    (@anevins)

    Do you have Google Chrome?

    yes

    Moderator Andrew Nevins

    (@anevins)

    Open your website in Google chrome and right click on the “buy work” page element. Then select ‘Inspect element’.

    A new toolbar appears.

    Look at the HTML in that toolbar. Look at the <li> element that holds your “buy work” element.

    Can you see there’s a class that is used to identify the page you are currently on?

    yes, a pretty long class!

    <li id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-287 current_page_item menu-item-316"><a href="http://www.davehakkens.nl/blog/leftover/">leftover</a></li>
    Moderator Andrew Nevins

    (@anevins)

    Classes are separated by spaces. The class you are looking for starts with “current”.

    sorry I am not sure what you mean..
    in stead of : #menu-item-322
    it should be like this: #current_menu_item

    because that isn’t working..

    Moderator Andrew Nevins

    (@anevins)

    CSS uses different symbols to target classes and IDs.

    The symbol to target a class is a full-stop character:

    .

    The symbol to target an ID is a hash character:

    #

    allright so I have this now

    #menu-item-322 a {
    	display: block;
    	background-image: url('http://www.davehakkens.nl/portfolio/images/layout/header/up_10.png');
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 74px;
    	text-indent: 9000px;
    }
    
    #menu-item-322 a:hover {
    	display: block;
    	background-image: url('http://www.davehakkens.nl/portfolio/images/layout/header/active_10.png');
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 74px;
    	text-indent: 9000px;
    }
    
    .current_menu_item-322 a:{
    	display: block;
    	background-image: url('http://www.davehakkens.nl/portfolio/images/layout/header/over_10.png');
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 74px;
    	text-indent: 9000px;
    }

    So the first on is normal, second rollover, third would be the active one..
    But this one doesn’t work

    I really don’t get it…

    Michael

    (@alchymyth)

    Forum Moderator

    try:

    #menu-item-322.current-menu-item a { ... }

    AWESOME!

    thanks a lot!!!

    dave

    v3rit4s1989

    (@v3rit4s1989)

    ++ alchymyth

    perfect answer!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Menu images instead of text, including :active’ is closed to new replies.