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!
Resource:
You need Divi & a little CSS.
Procedure:
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('http://yoursite.com/barber-pole.png'); // 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!
Thank you my friend!
Please, is there any way to have fullwidth background image and transparent background vertical left menu over it?
Here is example:
http://demo.qodeinteractive.com/bridge82/
Thank you!
Hi mario,
Sorry to reply late. The effect you asked for is not possible to achieve as menu area and main content area are different sections and can not share the same image to be spread over both the sections at same time.