Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

*This tutorial has not been tested in Divi 2.4 or above

One of the many features of the Divi Theme by Elegant Themes is the custom header layout options. I love them all.

But lately I had been wanting to do something a little different and when Eileen approached me to see if centering the logo between the menu was going to be possible with Divi, I had an excuse to jump right in. So here is a brief tutorial on how to center your logo in the middle of the menu starting from the basic homepage template from Divi.

Centered Header Layout

Start off by customizing the header layout using the built in WP “Customize” options. Go to Appearance>Customize.


  Adjust the following theme settings


Select the Save and Publish button on the top

Turn Off Fixed Navigation Bar

Go to Appearance>Divi Theme Options>General Settings


  Disable Fixed Navigation Bar then hit Save



Upload Logo

Go to Appearance>Divi Theme Options>General Settings


  Select “Upload Image” and then drag and drop your logo into the box.



  You will select Use Logo button and then be sure to select Save button on the bottom of the Divi Theme Options ePanel page.




Layout The Home Page and Hero Section

Open up your Home Page and create a new section on the top of the page.


  In this section you can add the background image you want to use.


  Now give the section a unique CSS Class. In this case I will use the word hero.


  Hit save and then insert a single column within the section and then insert a text module within the section.

In our case I will simply use this as a place holder but here you can insert an image or add text to be displayed over the image. But today we just want people to see the image and we are going to add text below it so that we can focus on the header.


  Update or Publish the page and then move on to where the magic happens

The Magic of CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

The Header

Lets start by customizing the menu. This snippet of CSS will do the following…

Drop logo, adjust size of logo, make the header background transparent, remove the main header shadow, space out the menu links, transform the menu to uppercase letters & adjust the menu link colors.


#logo {margin-bottom: -80px; max-height:143px;}
#main-header {background-color: rgba(255, 255, 255, 0)!important;}
#main-header{ -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important; padding-bottom: 50px;}
#top-menu li {padding-right: 35px; font-size: 14px; text-transform: uppercase;}
#top-menu li.current-menu-item > a{color:#000!important;}
#top-menu a:hover {color: #000;}

Now go to view the page and it may look something like this


  Using Chrome Dev Tools or Firebug (using Chrome or Firefox will come with these tools by default) move your mouse cursor over to the third menu item or which ever item is going to be just to the left of the logo. And then right click and select “Inspect element”.


  On the right (or bottom) of the screen you will see a window appear showing you the css for the page. In that section you should be able to identify that menu’s unique id. It should be right above the line that was automatically highlighted when you clicked on “Inspect Element”. For example ours is menu-item-118 which I highlighted in red in the image below.


  Now that you have that unique id, you can insert this CSS into you panel/sheet. You will have to replace the id number with your own. You may also adjust the padding depending on how wide your logo is.

This element will add space between the third and fourth menu item making room for the logo.

li#menu-item-325 {padding-right: 355px;}

BE SURE TO REPLACE THE ID NUMBER WITH YOUR SPECIFIC ID NUMBER.   Your header should now look something like this…


The Hero Section

Now you are going to add this next snippet to adjust the Hero Section/Image. This element will do the following…

Move the section up behind the headers, increase the height, reduce the padding on the bottom and make sure that it stays behind the “Top Header”


.hero {height: 1100px; margin-top:-223px; z-index: -1; padding-bottom:0px;}


The Top Header

Now lets give that top header a little more style. This element will do the following…

Contain the top header so that it does not spread across the screen, space out the social icons and remove the unused email logo.


#top-header, #et-secondary-nav li ul {
background-color: #333333!important;
max-width: 1080px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;

#et-info-email {display: none;}
#et-info-phone {color: #fff!important;}
#top-header .et-social-icon a {font-size: 14px;padding-left: 20px;}
.et_nav_text_color_light .et-social-icon a, .et_nav_text_color_light #et-info a { color: rgba( 255, 255, 255, 1 );}
.et_nav_text_color_light .et-social-icon a:hover, .et_nav_text_color_light #et-info a:hover { color: rgba( 255, 255, 255, 0.6 )!important;}

And your end result should look something like this depending on your images and color choices centered-logo-in-divi1200x627You will find a demo of

Responsive CSS


  • As with all my tutorials, the RWD CSS I provide will fluctuate based on your personal image sizes and how many screen sizes you want to adapt to.
  • But to get you started, here is some CSS you can add to cover most of the basics. With a little experimentation, you should be able to tweak these elements until you get what you want, on the display sizes you want.



/* --------- iPads (landscape) --------- */
@media only screen and (max-width: 1100px) and (min-width: 981px){
.hero {height: 680px;}}

/* --------- iPads (Portrait) ---------- */
@media only screen and (max-width: 980px){
.et_header_style_centered #logo {float:left; max-height: 73px;}
.et_header_style_centered #main-header .mobile_nav {float: right; width: 100px;}
.mobile_menu_bar:before {display:none;}
.et_header_style_centered .mobile_nav .select_page {padding-left: 12px;}
ul#mobile_menu {margin-top: 40px;}
.hero {height: 700px;}
li#menu-item-118 {padding-right: 0px;}}

/* ------- iPhone5 (landscape) --------- */
@media only screen and (max-width: 767px) {}

/* ------- iPhone5 (portrait) ---------- */
@media only screen and (max-width: 479px){
#top-header {display:none;}}



And that’s it! Have fun!

View Demo


This article was originally featured as a guest post on www.eileenlonergan.com. You can view the original post here http://www.eileenlonergan.com/centered-logo-between-menu

Well that’s all for now. I hope you find this article useful.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest

Share This

Share this post with your friends!