Jump to content

Archived

This topic is now archived and is closed to further replies.

dchetson

Add Image to Menu Items in a Sidebar?

Recommended Posts

dchetson

Is there a way to add images to each menu item in a sidebar?

Share this post


Link to post
Share on other sites
Danny

HI,

 

I am going to need more information, for example how have you added your menu to a sidebar is it via a widget or custom HTML ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dchetson

Widget. Website is www.equinethermographics.com.

Share this post


Link to post
Share on other sites
Danny

OK, then to add an image, you're going to need to use custom CSS and target each menu item.

 

Use the following code to add the Google Chrome to your first menu item, you can use this as a base for all your other menu items. You will need to inspect each menu item to get the correct menu-item-X class.

 

/* Adds background image to
 * Menu item with ID of 124
 */
.menu-item-124 {
  background-size: 20%;
  background-position: left top;
  background-repeat: no-repeat;
}
/* Padding to position
 * Menu item away from image
 */
.menu-item-124 h6 {
  padding-left: 60px;
}
 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Kedark
      By Kedark+
      Hello,
      I apologize for the trivial question, but I can not deal with it. How do I turn off the display of a distinctive image on the page? (I have to add it because I use plugins that use it), but as I display the page, I do not want it to be visible (and appears above the subject.).
      Probably a cliché but I can not deal with it. Therefore, a request for help.
      Regards
      RKA
    • mtaus
      By mtaus+
      I have added a Lax section on the footer of this site: http://www.ics-law.org.php72-38.lan3-1.websitetestlink.com/ but the background image is not displaying. When I first add the image it appears in the background, but then after saving and reloading it is gone even though the thumbnail indicates it's still there. Screenshot attached.
      Any suggestions?

    • mtaus
      By mtaus+
      I'm trying to add a Careers page to a site to display job openings. The plan is to create a Post using a subcategory 'Careers' and then display those on the page. All of the post sections in PL seem to include images and there's no obvious way to remove them or include an excerpt from the post. 
      Any suggestions?
    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
×