[Theme: Twenty Eleven] Image in navigation twenty eleven theme

Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

OK now I’m set up with a child theme

but I have the exact same problem I don’t see how this will help me, unless this just so i wont mess up the original theme

unless this just so i wont mess up the original theme

Bingo! ??

If you now want to add an image next to a link in the navigation, you have to start tweaking your child’s CSS – working with the existing CSS classes. You shouldn’t need any additional classes.

thanks for the response but anything I do is overridden by
#access ul ul a {
background-image: -moz-linear-gradient(#C5E4FF, #8DCAFF);
background-image: -o-linear-gradient(#C5E4FF, #8DCAFF);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C5E4FF), to(#8DCAFF)); /* older webkit syntax */
background-image: -webkit-linear-gradient(#C5E4FF, #8DCAFF);
}
If I was not clear I’d like to have different images next to different items on the navigation like an arrow to show that there is a dropdown or a video image next to the link to the video page

If I turn the above lines off I can see the image in its proper place but when background-image is on in access ul ul a it overrides my private class

I’m sure there is a better way to do this but this is what I found

Add your image under the class:

#menu-item-(*).grand a{
background: url(images/arrow-right.png) no-repeat right center, -moz-linear-gradient(#252525, #0a0a0a); /* must use background element */
}

The problem with this is that it will add the image to the entire sub list that is under that navigation item
So we need to override that styling again with the original styling

#menu-item-(*).grand ul.sub-menu a{
background-image: -moz-linear-gradient(#252525, #0a0a0a);
}

*the number of the navigation item you want to display the image on

Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

BTW if you work properly there should be no problem editing the theme there was no reason to create a child theme.
If you mess up so badly you can always download the theme again

Hi there, I have a similar problem. I am using a child theme and have set an image for the background for #access. This is working fine.

I would like to use an image of an arrow to show when there is a sub-menu available. I’ve been able to get this working using the text based >> arrow, but I would prefer an arrow that points down instead of to the side. I haven’t been able to figure out how to get this done.

Any help would be appreciated.

Thank you

My apologies, I should have specified that this is a child theme for the TwentyEleven theme.

Resolved ?? I found the .sf-sub-indicator CSS I needed to edit to be able to replace the >> with an image.
Added the following to my child theme CSS:

a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px;
}

a > .sf-sub-indicator {
    background-position: 0 -100px;
    top: 17px;
}

.sf-sub-indicator {
    background-image: url("images/arrow.png");
    display: block;
    height: 10px;
    overflow: hidden;
    position: absolute;
    right: 4.75px;
    text-indent: -999em;
    width: 10px;
}

And increased the padding around #access a

I added the following code to my css for the 2011 child theme but the image isn’t displaying on the site at https://www.rcrumbcom.dreamhosters.com/about-me

#menu-item-(4).grand a{
background: url(images/prints.jpg) no-repeat right center, -moz-linear-gradient(#f70909, #ff0000); /* must use background element */
}

NB: The number ‘4’ corresponds to page #4 which is the About page.

.css is https://pastebin.com/mZDHDRaV

Now I’m trying the following code but it’s not working on my 2011 child theme either:

[CSS moderated as per the Forum Rules. Please just post a link to your site.]

The test image is 32 x 32 pixels. Suggestions anyone?

Hi beree22,

Finding the right code to use can be a challenge. I know it is for me as I do not have a coding background and work on a trial and error basis. The one tool that I have found to be of the most use in this is the firebug plugin I installed in my Firefox browser. It allows me to right click on the area of the web page that I would like to change and see the underlying CSS and which CSS, be it the original theme or the one belonging to a child theme, is being used. It can still be interesting to find the correct syntax, even with this information, particularly if you are singling out a specific area to change rather than making a global change.

In the case of an image not showing, I have found that usually this is due to the URL being incorrect, although occasionally, in the case of my trying to put an image in the background, it may be a z-index issue. I mess this one up myself frequently.

Those viewing this may correct me if I am wrong. I believe the path used in the CSS must be either the full path to the image, or the path in relation to the position of the CSS file being used. Try using the full path to the image and see if the image appears. If it does, then you had the wrong path. When editing a CSS file, keep in mind that the CSS file for the child theme may be in a different location in relation to the image than the CSS file for the default theme.

You may also need to clear the cache in WordPress if you have that running and/or your browser. I turn the site cache off when editing.

Having said all that, it is unclear to me exactly where you are wanting to put this image. Be very precise in describing where you would like the image to appear as this will assist others in helping you.

Hope that helps…

The site is https://www.rcrumbcom.dreamhosters.com/about-me

Yes, I regularly use Firebug. I cleared the cache. I do agree that image path is important — I use the full path since the /images/ doesn’t always work for me.

I’d like to add an image on the navigation text links. For example, instead of the text link “About”, I’d like an image link. On the child theme .css, I just tried the following code instead of the #menu-item-(4)
https://pastebin.com/PVxFRPaV

Someone just shared that he was able to add and view .page-item-4 using Firebug. He said that my “CSS file seems to have several issues with brackets improperly closed and such. That might be why rules fail to apply.”

My question:
I went to https://jigsaw.w3.org/css-validator/ but it’s showing the .css for 2011 parent file and the child theme ought to override it.
Should I make make the suggested https://jigsaw.w3.org/css-validator/ changes in the child theme and see if my child theme changes work? I can make some changes easily but others may be beyond me. And the css validator makes a difference between css2 and css3 properties.
Also, the DigitalRaindrops author did suggest using custom-style.css in the child theme when making changes but I’ve been using the child .css since it didn’t look like the custom-style.css was taking changes.

What do you think?

Hi befree22,

As I mentioned above, I am probably not the best person to be answering you on this, but, if someone has pointed out errors in your CSS file, that would be the first place I would start.

Ask yourself if any of the changes made by the CSS for the child theme are in effect. If not, you will need to find out why the child theme CSS is not being used. If so, you just haven’t come up with the right syntax yet for the change you want to implement.

If it is being used, I would try the following and see if it makes a difference:

li.page_item page-item-4,
li.page-item-6 {
    background: url(https://www.rcrumbcom.dreamhosters.com/wp-content/themes/columns/images/callme.png) top center no-repeat !important;
}

and if that doesn’t work, try:

li.page-item-4 a,
li.page-item-6 a {
    background: url(https://www.rcrumbcom.dreamhosters.com/wp-content/themes/columns/images/callme.png) top center no-repeat !important;
}

Notice I took out the color portion as the background color comes from the menu bar.

Unfortunately, my child theme handles this area differently from yours so I am not able to test this on my site. I’m afraid that this is about the limit of my ability. Hopefully someone with a bit more experience will help you out if the above doesn’t work.

I appreciate your input.

I cleaned up most of the css errors in the child theme and as a result, the top nav image icon now shows on the About page ??

The css errors in the child theme that still require fixing relates to colors and the helper stated that “Such things as background/foreground are not very reliably detected by code, if it looks fine in browser I’d not bother trying to get it to validate.”

I now know how to fix most validation error and will work to ensure that the parent css isn’t messing up the css changes and the syntax I use.

Thanks to everyone ??