Image as page link in Menu bar

[ROBIN]

I would like to put an image in the menu bar instead of text.    I put the HTML code for the picture and link in the title section.

Is there a better way to do this?

I obviously would put a grey background behind the image, but before I go to all that work I need to see if I can get it to line up with the rest of the links in the menu bar.

Is there something you can suggest to make this more in line?

The Website is 2sticky.com

Thank you for any help you can provide.

 

[scrambler]

I would normally put the HTML in the Custom menu Item Navigation label, and also add a class to make it easier to style with CUstom CSS.

Once that is done, we can help with the CSS to fine tune it

[ROBIN]

I found a plug in that makes it easy to add the image and I have other uses for that plugin later with this website, so I am ok using it.  I never could figure out where you wanted me to put the image code in the appearance menu section.

What I need now is to move it up just a little to be more in line with the other menu links.  I have added the css class of brcode to the Appearance, Menu, BR Code page, additional CSS  class block.

I have added that css class of brcode to the Custom CSS Rules area of the theme but it isn’t working.  I am sure I have some little thing that is not exactly correct.

Would you mind taking a look?

[ROBIN]

It also looks like the image shows mirrored on Chrome, but only once on IE.  Maybe that plugin isn’t a great idea.  Dang it

I have searched everywhere and I don’t know where the second image is coming from.

[ROBIN]

Looks like I was able to remove the second image.  It must have been a cache issue.  Back to needing a little help with the alignment CSS to move it just a smidge up.

Thanks for any help you can provide.

[scrambler]

The rule below will reduce the top padding, use the value your like

.wvrx-menu #menu-item-56573 a {padding-top:0.3em;}

 

[ROBIN]

I wasn’t able to make this work.

I had given that page a nameclass of .brcode so I thought maybe that was the problem.

When I couldn’t make yours work I also used this one. .brcode {padding-bottom: 2em;}

It didn’t work either.  I am trying to move the image up so I used bottom padding instead of top, however I tried both just in case I was wrong and I just can’t get it to move.

Do you have any other ideas?

[scrambler]

The padding is on the link (a) and it may need important.

Try the rule below, and if it does not work, post back with the rule in place so I can see what could be breaking the CSS. Do check all your custom CSS in a CSS validator to make sure you don’t have a syntax error breaking things

.brcode a {padding-top:0.3em !important;}

 

[ROBIN]

Can you take another look?  I can’t get it to line up for anything.

I really have come a long way, with CSS, but this is kicking my behind.

As always thanks for any help you can give.

[scrambler]

The rule is working

Right now you have the padding at 0.06em which makes the image too high

If I change the value to .2em the bottom of the image aligns with the bottom of the menu text

If I change it to 0.35em, the image center is align vertically with the text center.

If when you change the value nothing happens for you, then you have a cache issue

If when you change the value it moves but none of the above does what you want, explain what alignment you are after

[Author]

Posts