WordPress.org

Ready to get started?Download WordPress

Forums

Trying to customize current page via single image navigation (7 posts)

  1. dsiegon
    Member
    Posted 1 year ago #

    Hello,

    I am building a site and am employing a single image navigation. It's working perfectly except for the current page state. When indicating the current page in the navigation the image is not positioning correctly. It displays an overlap between two of the buttons. What code do I need to write/change in order to postion the image correctly on the current page? Will I need to use php?

    I am using WordPress 3.4.2 and my own child theme of the Genesis framework 1.8.

    Here is the site.

    This is the current code I have for the single image navigation:

    #menu-item-32 {width: 64px;}
    #menu-item-31 {width: 84px;}
    #menu-item-30 {width: 92px;}
    #menu-item-29 {width: 86px;}
    
    #menu-item-32 a:hover{
    background: url("/wp-content/uploads/2012/09/sppm_imagenav.jpg") 0px 0px no-repeat; color: #fff;}
    #menu-item-31 a:hover{
    background: url("/wp-content/uploads/2012/09/sppm_imagenav.jpg") -64px 0px no-repeat; color: #fff;}
    #menu-item-30 a:hover{
    background: url("/wp-content/uploads/2012/09/sppm_imagenav.jpg") -148px 0px no-repeat; color: #fff;}
    #menu-item-29 a:hover{
    background: url("/wp-content/uploads/2012/09/sppm_imagenav.jpg") -240px 0px no-repeat; color: #fff;}
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is the problem the spacing of the buttons?
    If so, try the css,

    .menu-primary li, .menu-secondary li, #header .menu li {
     padding: 0 5px;
    }
  3. dsiegon
    Member
    Posted 1 year ago #

    I tried it and it didn't solve the problem. I think it may be a problem with the positioning of the background image. Is there a way I could assign an id to each page and position it using that?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your pages already use an id, well a unique identifier as a class within the <body> element.
    For example, the Servicios page has this;

    <body class="page page-id-19 page-template-default custom-background header-full-width header-image full-width-content">

    The unique identifier class would be page-id-19.

  5. dsiegon
    Member
    Posted 1 year ago #

    So would I be able to use that identifier to position the background image in the navigation to indicate the current page?

    I tried this, but it didn't work:

    body .page-id-19 #menu-item-31 a {
    background: url("/wp-content/uploads/2012/09/sppm_imagenav.jpg") -64px 0px no-repeat; color: #fff;}
  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you're using both the HTML element and the class/ids of that element in your CSS selector, you need to bunch them up without space.
    E.g in your case

    body.page-id-19 #menu-item-31 a {
     background: url("/wp-content/uploads/2012/09/sppm_imagenav.jpg") -64px 0px no-repeat; color: #fff;
    }
  7. dsiegon
    Member
    Posted 1 year ago #

    That took care of it! Thanks for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic