WordPress.org

Support

Support » Themes and Templates » [Resolved] Custom menu does not work

[Resolved] Custom menu does not work

  • Hallo,

    I set up a Child Theme of Twenty Eleven:
    http://apotheke-sauter.de

    Everything works just fine except for my custom menu. I inserted an image but it does not appear. I double checked the image paths. Everything’s fine.

    Do you have any idea what can be the solution?

    Thanks!
    Anna

Viewing 15 replies - 1 through 15 (of 15 total)
  • esmi

    @esmi

    Forum Moderator

    I inserted an image but it does not appear.

    You inserted an image where? And how?

    I inserted the image in my custom style.css. It worked on my local BitNami Server. Online it does not work.
    Code:

    #access .sautericon a {
    background:url(‘http://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg’) no-repeat 0.5em 0.5em #0064ae;
    }

    #access .sautericon a {
    padding:0 1.2125em 0 2.8em;
    }

    #access .sautericon a:hover, #access .sautericon a:focus {
    background:url(‘http://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s_inv.jpg’) no-repeat 0.5em 0.5em #ffffff;
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Doesn’t look like there’s a class named, “sautericon” in your menu.

    esmi

    @esmi

    Forum Moderator

    Where are you trying to add this image to in your theme?

    I am trying to add the image to my menu…

    I am trying to add the image to my menu…

    where exactly?
    on any of the menu items?
    or as a full menu background?
    or on the left/right of the menu?

    in any case, right now, the linked web page does not have the css class .sautericon anywhere.

    WPyogi

    @wpyogi

    Forum Moderator

    Try this:

    #access ul li a {
    background:url('http://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg') no-repeat 0.5em 0.5em #0064ae;
    }
    
    #access ul li a:hover, #access ul li a:focus {
    background:url('http://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s_inv.jpg') no-repeat 0.5em 0.5em #ffffff;
    }

    esmi

    @esmi

    Forum Moderator

    As Andrew said, there’s no class named, “sautericon” in your menu.

    I would like to put the little image to every menu item.

    Where will the css class “sautericon” be defined? In my style.css? What will be the code?

    Thanks for help!

    esmi

    @esmi

    Forum Moderator

    Do you understand how CSS works? Have you tried implementing WPyogi’s suggestion?

    I am trying very hard to understand css.
    Yes, I tried WPyogi’s suggestion. It worked very well. The image appeared! Wow!
    What will be my approach to find the right position of the image? It shall be at the beginning of each menu item.
    You guys are great. This forum is really helpful. Thanks.

    esmi

    @esmi

    Forum Moderator

    How much CSS do you know? Have you tried using resources like:
    CSS Tutorials
    Learning CSS

    Yes. I am a newbie and set up this whole website.
    But at some points I cannot figure out how to approach my aim. E.g. positioning my little menu image…

    WPyogi

    @wpyogi

    Forum Moderator

    Try chaninging the above to this:

    #access ul li {
    background:url('http://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg') no-repeat 0.5em 0.5em #0064ae;
    }
    
    #access ul li:hover, #access ul li:focus {
    background:url('http://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s_inv.jpg') no-repeat 0.5em 0.5em #ffffff;
    }

    And then add:

    #access a {
       margin-left: 30px;
    }

    And yes, as esmi has mentioned, you do need to learn some CSS to make changes like this to your site :)!

    I am learning every day 🙂
    Thanks! And good night!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘[Resolved] Custom menu does not work’ is closed to new replies.
Skip to toolbar