image behind each menu item

Hey BPC,

It is possible, but visually may not look good as it could distort the text and make it unreadable.

Best regards,
Jordan Shannon

Hi,

You need to load the image to the media library, and using css add it as a background image to the specific menu item.

#avia-menu #menu-item-***{
background-image url();
}

Best regards,
Jordan Shannon

Hi,
Try this:

#top #header_meta{
background-image url();
}

Best regards,
Jordan Shannon

Hi,

What is login info. I will log-in and add a color and from there is should be simple for you to put an image.

Best regards,
Jordan Shannon

Hi,

Please send a screenshot of the exact section you need fixed.

Best regards,
Jordan Shannon

Hi,

Okay thanks. I have gotten the image to appear, you just need to adjust the image, padding, etc to what you need so it fits properly.

Best regards,
Jordan Shannon

Hi,

Best regards,
Victoria

Hi BPC,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

li.menu-item a {
      background: url(https://megapoint.nl/wp-content/uploads/2017/04/button_home.png) top left no-repeat;
      background-size: cover;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

As you have menu items with different sizes, you could use the CSS to make the background style instead the images because the image haven`t the correct width for some items.

Try adding this custom CSS code at Enfold Theme Options > General Styling > Quick CSS

li.menu-item a {
   border-radius: 60px 60px 60px 60px;
  -moz-border-radius: 60px 60px 60px 60px;
  -webkit-border-radius: 60px 60px 60px 60px;
  background: rgba(183,222,237,1);
background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(50%, rgba(113,206,239,1)), color-stop(51%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=0 );

}

You can change the gradient settings using this Gradient generator: http://www.cssmatic.com/gradient-generator#’\-moz\-linear\-gradient

Best regards,
John Torvik

Hi,

I updated John’s code above in quick css and it seems to be working fine:

I replaced this:

li.menu-item a

With this:

.menu.av-main-nav .menu-item-top-level

Best regards,
Jordan Shannon