WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom menu does not work (16 posts)

  1. AnnaHavanna
    Member
    Posted 1 year ago #

    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

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    I inserted an image but it does not appear.

    You inserted an image where? And how?

  3. AnnaHavanna
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Doesn't look like there's a class named, "sautericon" in your menu.

  5. esmi
    Forum Moderator
    Posted 1 year ago #

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

  6. AnnaHavanna
    Member
    Posted 1 year ago #

    I am trying to add the image to my menu...

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

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  9. esmi
    Forum Moderator
    Posted 1 year ago #

    As Andrew said, there's no class named, "sautericon" in your menu.

  10. AnnaHavanna
    Member
    Posted 1 year ago #

    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!

  11. esmi
    Forum Moderator
    Posted 1 year ago #

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

  12. AnnaHavanna
    Member
    Posted 1 year ago #

    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.

  13. esmi
    Forum Moderator
    Posted 1 year ago #

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

  14. AnnaHavanna
    Member
    Posted 1 year ago #

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

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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 :)!

  16. AnnaHavanna
    Member
    Posted 1 year ago #

    I am learning every day :-)
    Thanks! And good night!

Topic Closed

This topic has been closed to new replies.

About this Topic