WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Menu images instead of text, including :active (16 posts)

  1. davehakkens
    Member
    Posted 1 year ago #

    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/

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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 .

  3. davehakkens
    Member
    Posted 1 year ago #

    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?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you using a Child Theme?

  5. davehakkens
    Member
    Posted 1 year ago #

    yes

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have Google Chrome?

  7. davehakkens
    Member
    Posted 1 year ago #

    yes

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  9. davehakkens
    Member
    Posted 1 year ago #

    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>
  10. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  11. davehakkens
    Member
    Posted 1 year ago #

    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..

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    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:

    #
  13. davehakkens
    Member
    Posted 1 year ago #

    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...

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    try:

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

  15. davehakkens
    Member
    Posted 1 year ago #

    AWESOME!

    thanks a lot!!!

    dave

  16. v3rit4s1989
    Member
    Posted 3 months ago #

    ++ alchymyth

    perfect answer!

Topic Closed

This topic has been closed to new replies.

About this Topic