WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Inserting Menu Icons in Responsive Theme (30 posts)

  1. IMgirl
    Member
    Posted 1 year ago #

    Hello,

    I have just begun designing my new WordPress site. I decided I would like to have menu icons. For example, my home menu would say 'home' and then it will have a house above or beside it. I have watched a few YouTube tutorials, but have been unable to create the menu icons of my own. Any help you can offer would be appreciated. I used an FTP to upload the images to the responsive/images folder. I made a copy of style.css to save on my computer. I then used this code from one of the tutorials and pasted it at the bottom as the directions said. Thanks in advance for the help.

    :/* Home Icon */
    .menu-home {
    text-indent: -100px;
    background-image: url(images/home.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }
    .menu-home´╗┐ a:hover {
    background: #f5f5f5 !important;

    [Complete style.css file deleted - please do not post that much code here. For CSS , post a link to your site - the code is all visible there]

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    What is the issue, your images not loading?

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    First you need to be using a Child Theme so that changes to your site are not overwritten when the theme is updated. Responsive has a free child theme you can download and use.

    See here: http://cyberchimps.com/forum/free/responsive/

    Once you have that set up, post a link to your site for help with CSS.

  4. IMgirl
    Member
    Posted 1 year ago #

    Andrew - Yes, the issue is that the images are not appearing on the menu bar.

    WPyogi - Thanks I will do that.

  5. IMgirl
    Member
    Posted 1 year ago #

    I have installed the child theme. Looks like it has wiped out my header, but I will fix this later.
    Here is the link:


    http://yeahitsfree.com

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yeah, child themes don't carry over settings/options from the parent theme, so you have to redo those.

    For menu items - you can use the menu-item specific class to target each one, so for example this one:

    <li class="page_item page-item-79">

    would be:

    .menu li.page-item-79 a {
    
    }

    Also, try using absolute file paths for images if the other doesn't work.

  7. IMgirl
    Member
    Posted 1 year ago #

    WPyogi, I appreciate the help. I am very new to CSS, so I just want to make sure I understand.

    I would change: <li class="page_item page-item-79">

    to:
    .menu li.page-item-79 a {

    }

    And then add a more direct path to the specific image, such as the bolded?

    :/* Home Icon */
    .menu-home {
    text-indent: -100px;
    background-image: url(wp-content/themes/responsive/images/home.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }
    .menu-home´╗┐ a:hover {
    background: #f5f5f5 !important;

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    First, you can't do any of this work without using a browser tool like Firebug - so get that set up. Then use that to look at the menu HTML code - the first two items show this:

    <li>
    <a title="Home" href="http://yeahitsfree.com/">Home</a>
    </li>
    <li class="page_item page-item-79 current_page_item">
    <a href="http://yeahitsfree.com/astrology/">Astrology</a>
    </li>

    So you can see that the class page-item-79 is specific for the Astrology page - so then you use that class for that page only.

    .menu li.page-item-79 a {
      background-image: url(PUT THE ABSOLUTE URL TO THE IMAGE HERE);
    }

    You will have a CSS piece like the above for each page - the page-item class and the image name will be different for each one.

    The home page does not seem to generate a page specific class (weird) but you should be able to still assign an image by putting that one first (without the page id class) and then the other ones will override that one.

    Also, you need to upload the images using the media uploader and use the URL for those images from the media library.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Oh, I also meant to say that this .menu-home { won't ever work because there is no such CSS class in your theme. CSS is totally theme and site specific so you can't use CSS you find elsewhere.

    This is a good CSS reference site that will likely come in handy too:

    http://www.w3schools.com/css/default.asp

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Actually, on second thought, try using this one for the home page image:

    body.home .menu li a {
      background-image: url(PUT THE ABSOLUTE URL TO THE IMAGE HERE);
    }

    Using the body.home first will restrict it to the home page in another way.

  11. IMgirl
    Member
    Posted 1 year ago #

    Thank you. I will try these suggestions now. Can I just put all of the coding in the bottom of style.css?

    And absolute path is this:

    http://yeahitsfree.com/wp-content/themes/responsive/images/astrology.png or
    (wp-content/themes/responsive/images/astrology.png)

    ?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, at the bottom of your Child Theme style.css file

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try putting that first URL in a browser - does it show the image?

    Doesn't show an image for me - that's why you need to use the media uploader to upload the images - then use the URL from the media library for each image - it's on the right side of the screen for the image.

    Responsive child theme has a section where you should add your styles - right under this:

    /* =Start From Here
    -------------------------------------------------------------- */
  14. IMgirl
    Member
    Posted 1 year ago #

    It worked! I'm really happy about that. Thank you.

    I now have a problem where it repeats itself.

    I tried using this:

    background-repeat: no-repeat !important;

    Any idea how to make it show just one crystal ball?

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't see anything on the site or in the CSS...have you cleared any caches?

  16. IMgirl
    Member
    Posted 1 year ago #

    I see six crystal balls over the astrology menu using IE. But when using Google Chrome or Firefox, I see nothing. How do I clear the cache?

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It would be a plugin - it doesn't look like you have any. But where did you put the CSS code? I don't see it in the child theme style.css file - or did you use the custom CSS? What is the code you used?

  18. IMgirl
    Member
    Posted 1 year ago #

    I can can now see it in firebox, but nothing in chrome.

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, visible for me now too.

  20. IMgirl
    Member
    Posted 1 year ago #

    /* =Start From Here -------------------------------------------------------------- */
    .menu li.page-item-79 a { background-image: url(http://xxxx.com/wp-content/uploads/2013/05/Astrology.png); }

    That is the code I used in the child style.css

  21. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try changing it to this:

    .menu li.page-item-79 a {
        background: url("http://yeahitsfree.com/wp-content/uploads/2013/05/Astrology.png") no-repeat ;
        padding: 0px 10px 0 40px;
    }
  22. IMgirl
    Member
    Posted 1 year ago #

    Perfect. Thanks so much for the help. Now I will do the others.

  23. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Cool - it looks great, BTW! And look at all the CSS you learned too - LOL!

  24. IMgirl
    Member
    Posted 1 year ago #

    Yes, you're right! :) I've learned a lot with all your help!

  25. IMgirl
    Member
    Posted 1 year ago #

    body.home .menu li a {
    background-image: url(PUT THE ABSOLUTE URL TO THE IMAGE HERE);
    }

    Everything works except for the home menu image. I used the above code as suggested with a direct link to the home image. Any suggestions to make the home menu icon show up?

  26. paulwpxp
    Font hero
    Posted 1 year ago #

    The Home one is a bit tricky, it has this in the parent's style

    .front-page .menu .current_page_item a {
    	background: none;
    	background-color: transparent;
    	background-image: none;
    	filter: none;
    }

    On a sidenote, the menu doesn't look like it's the one created from WP dashboard under Appearance, it looks like it's the default fallback page menu ( you can see it's sorted alphabetically ), with the Home one being automatically added, this might be the reason there is no class output into the <li>

    So as it is now, for the Home one, you could just use :first-child

    .menu > li:first-child > a {background:red;}

    or with attribute selector like this

    .menu li a[href="http://yeahitsfree.com/"] {background:red;}

    or this

    .menu li a[title="Home"] {background:red;}
  27. paulwpxp
    Font hero
    Posted 1 year ago #

    Combine that to override the front page property set in parent's

    .front-page .menu .current_page_item a,
    .menu li a[title="Home"] {background:red;}

    or use just one with a heavier specificity

    #header .menu li a[title="Home"] {background:red;}
  28. IMgirl
    Member
    Posted 1 year ago #

    I tried several of your suggestions, Paul, but it seemed to turn the background color red while not displaying the image. My goal is to have the home icon show up: http://yeahitsfree.com/wp-content/uploads/2013/05/homes.png

    Still no luck, but thanks for the help.

    By the way, yes, the home menu is set as the default. The original menu bar is black, but I changed the coding to make it various shades of blue.

  29. paulwpxp
    Font hero
    Posted 1 year ago #

    but it seemed to turn the background color red while not displaying the image.

    That's because you don't put in your background properties.

    Try this.

    #header .menu li a[title="Home"] {
    	background: url("http://yeahitsfree.com/wp-content/uploads/2013/05/homes.png") no-repeat scroll 0 0 transparent;
    	padding: 0 5px 0 30px;
    }
  30. IMgirl
    Member
    Posted 1 year ago #

    It worked! Thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic