WordPress.org

Support

Support » Themes and Templates » [Resolved] Inserting Menu Icons in Responsive Theme

[Resolved] Inserting Menu Icons in Responsive Theme

  • 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]

Viewing 15 replies - 1 through 15 (of 29 total)
  • What is the issue, your images not loading?

    WPyogi

    @wpyogi

    Forum Moderator

    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.

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

    WPyogi – Thanks I will do that.

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    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;

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    WPyogi

    @wpyogi

    Forum Moderator

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    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)

    ?

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

    WPyogi

    @wpyogi

    Forum Moderator

    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
    -------------------------------------------------------------- */

    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?

    WPyogi

    @wpyogi

    Forum Moderator

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

    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?

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘[Resolved] Inserting Menu Icons in Responsive Theme’ is closed to new replies.