Support » Themes and Templates » Custom menu does not work

  • Resolved AnnaHavanna

    (@annahavanna)


    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…

    Michael

    (@alchymyth)

    Forum Moderator

    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.

    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…

    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 ‘Custom menu does not work’ is closed to new replies.