/* Main Navigation Image*/
#main-header{
background:url(http://yourimagepath.com/yourimage.jpg)
no-repeat center;
background-size: cover;
}
Hey there Divi people, this is John from Divi Ready Themes and we’re here today to show you how we got those nice fancy headers the image backgrounds on the navigation menu on our past Divi themes; Campaigns and Contractors. The release we got some really good feedback and people seem to really like it so we are going to show you how to do it. It gives the site a little bit of a WOW factor – client really likes it if you can kind of blend that in with the rest of the site.
Let’s go ahead and get started. The first thing we need to do go into my Photoshop – we’re going to need a couple of banners. Now the banners I made here where for Contractors this one was for Campaigns. The contractors one was about 1920 by 108 pixels and the flag was about 1836 by 146. I would say keep it around 1920, about HD size should work fine. You’re gonna fool around with the height depending on how fat you want your header to be.
Let’s go back to our site. Now the first thing I did just to make sure was I checked to make sure that my header element was named the right thing. So I went into my inspector and inspected the header and I see here, it’s main header hashtag main – header so it is the correct one. I’m a thousand percent positive it’s the same on every Divi installation but just to make sure before you put the code in that it’s gonna be right. So let’s go into our theme customizer and let’s go down to additional CSS and let’s add a new piece of code here. Now the code is right here. I’m going to include this in the transcription below but the code is just these little tiny four lines of code we’ll get you that same effect.
So I’m gonna copy this whole thing here with the title. The bottom link there you see there is the link to the actual image so I’m going to print come back here and paste it into my additional CSS section. Here let me go back to my note here and grab that, copy that and we’re gonna put that right between these two brackets right here and as you can see BAM comes right up.
You can go back to the header and navigation primary navigation bar and you can fool around with the menu height if it doesn’t look right to you, you can make it a little bit smaller. I kept mine at about a hundred I think it was, and it looks pretty good. Then you got to make sure that your logo pretty much fits seamlessly over this. It’ll really make the theme come to life and your clients are gonna love it. So I hope you liked this video – this is John from Divi Ready Themes. I’ll catch you on the next one – bye.
Hey John! Thanks for the Article. It works cool but It’s not mobile responsive. Please describe how can I make it Mobile friendly.
nice and easy. would you have any hint how to make a SVG or PNG as your background for the menu. result should be a non square menu.