Align menu text over background images

[mkmommy]

Hello,

We have set up a custom menu with little bones for our background images behind each menu item here.

http://www.littlesammyboy.com/

Here is the CSS we used (specific to each menu item)

li#menu-item-51 a {

  display: block;

  background-image:url(‘http://www.littlesammyboy.com/wp-content/uploads/2015/09/Bone-for-Menu.png’);

  background-repeat: no-repeat;

  width: 101px;

  height: 44px;

margin:-5px 0px 0px 10px;

 }

Unfortunately, depending on the browser, the text does not want to stay aligned in the middle of the bone. Is there any way we can align the text of each item over the center of the bone and have it stay that way regardless of the browser or mobile responsiveness? Any assistance would be greatly appreciated.

Nikki B.

[scrambler]

this is because right now they are not being centered.

To center the menu items you can add the rule below in Main Options > Fonts & Custom > Custom CSS rule box

.menu-primary .wvrx-menu-container li a {padding:0;text-align:center;line-height:2.8;}

padding:0 removes padding so centering is only done with true centering property, text-align:center centers horizontally,  line-height does the vertical centering

You may also want to remove the separating line in the mobile menu with the rule below

.menu-arrows.is-mobile-menu a {border-none;}

[mkmommy]

Thank you so much for your answers about the menu!

Nikki B.

[scrambler]

@mkmommy

You need to reduce the file size of your background image.

Right now the file is over 3MB which is way too large for loading times (makes your site load very slow).

If you want to keep the 3200 x 2400 resolution, you at least need to resave the image with a higher jpeg compression level. I can get it down to 600KB without visual quality loss.

But very few computer have a screen resolution that high, so I would also reduce the resolution to something like 2000 x 1500 which can get it down around 300KB

[Author]

Posts