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

    • 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.
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

×