Trying to customize current page via single image navigation

  • 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;}
Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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;
}

    Thread Starter dsiegon

    (@dsiegon)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter dsiegon

    (@dsiegon)

    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;}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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;
}

    Thread Starter dsiegon

    (@dsiegon)

    That took care of it! Thanks for your help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Trying to customize current page via single image navigation’ is closed to new replies.