Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   How to put images between menu items (http://forum.bytesforall.com/showthread.php?t=21108)

gr870sfunk Nov 6, 2013 03:14 PM

How to put images between menu items
I scoured the forums for an answer I could live with, but I didn't find one.

After over an hour of trial and error, I have figured it out and thought I would share my newly acquired abilities. Lord knows if i've got/had this problem someone else has too.

The trick is to make it your background image on the links within the menu. Getting the positioning can be a little tedious, but that's just the way she goes.

This is the CSS for my menu:
HTML Code:

div#menu1 {
height: 36px;
background: transparent;
padding:0 0 0 110px !important;

div#menu1 ul.rMenu {
background: transparent;
border: none 0px;

div#menu1 ul.rMenu li {

ul.rMenu li a:link,
ul.rMenu li a:visited, 
ul.rMenu li a:active,
ul.rMenu li {
background-color: transparent !important;

div#menu1 ul.rMenu li a,
ul.rMenu li a:hover{
border:none !important;
list-style-type: none;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding:1em 2.5em 1em 1em;
background: url(http://www.montgomerytrees.org/wp-content/uploads/2013/11/menu-slash.jpg) no-repeat right center;

#menu-item-37 a{
background-image:none !important;

I'd post a link to it working, but the site isn't live yet. So here's a little screencap.

You have to make sure that both the active AND hover link states are included in the CSS with the background image otherwise said image will disappear on hover.

I hope this helps someone!

juggledad Nov 6, 2013 03:56 PM

You could also use a WP custom menu, add some dummy entries (img1 img2 etc) and set the link to '#'. Then find the menu ID name for each and use something like this

HTML Code:

#menu-item-1329 a span,
#menu-item-1330 a span {
  display: none;
#menu-item-1329 a,
#menu-item-1330 a {
  background-image: url('http://mydomain.com/wp-content/menu-spacer.jpg');
  height: 10px;
  width: 10px;

The first part causes teh menu item name (img1, img2) to NOT show and the second part displays your background image.

dread Mar 15, 2014 09:11 PM

The menu item for the blog page does not behave the same way as the other page items. The pages behave correctly with respect to margin or padding. The menu item for the blog page does not respond to margin or padding and the background image overlaps the text. I have had the same result using border-right:, where the blog page does not respond.

All times are GMT -6. The time now is 03:15 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.