Background Image in Divi Vertical Menu

I was developing a single page site with a left vertical menu and the client wanted to have an image of a barber pole at that area!


You need Divi & a little CSS.


Create a vertically centered menu. Do not make the menu a nested one – that will break it’s charm.

Put the following CSS:

/* Begin Image in Vertical Menu */
header#main-header {
    background-image: url(''); // Image to display
/* End Image in Vertical Menu */

/* Begin Menu Options Position */
.et_vertical_nav.et_header_style_centered #main-header #top-menu-nav {
    margin-top: 200px; // Adjust this value to put menu in contrast with the image
/* End Menu Options Position */

/* Begin Distance Between Menu Options */
.et_vertical_nav #main-header #top-menu > li > a {
    margin-top: 10px;
    font-weight: bold;
/* End Distance Between Menu Options */

/* Begin Set Logo Position */
.et_vertical_nav #main-header #logo {
    margin-top: 40px;
/* End Set Logo Position */

That’s all folks!