The Preview

I saw a question posted on Facebook asking how to make the header on this site with Divi. It’s a header with an extra navigation menu in the center, with the hamburger on the side. It looks like a great layout for having an extra menu that doesn’t have to be shown so prominently, like ecommerce websites, membership websites, etc. So I decided to make it.

and here it is:

It works well, and I didn’t style for submenus in this case because I figured the center nav should just be the major endpoints, and not the full menu, (that’s why we’re using two menus..?) if you want to style the submenu as well, you’re gonna have to do it yourself in this case.. or just bug me enough and make me do it haha. .. but yeah, If you want to learn CSS and do it yourself..

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

Onward..

 

The video

 

The code

 

NOTE: the php files mentioned below should be in your child theme. Do NOT make these edits to the parent theme.

 
Do you have a child theme?

No? Then you'll need one! (click here to read why you really need one)

If you need one, then head over here to get a free child theme that comes with some useful features.

Get a free child theme  

 

All set?

OK, here we go!

To register a new menu add this php snippet to the bottom of your functions.php file

(if the file has a ?> at the end, add the snippet before, otherwise, just drop it in there. Only thing to avoid is having extra blank spaces at the end of the file. This can cause issues with generating sitemap XML.)

function register_my_menu() {
  register_nav_menu('extra-header-menu',__( 'Extra Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

And add this

<?php wp_nav_menu( array( 'theme_location' => 'extra-header-menu', 'container_class' => 'extra_menu_class' ) ); ?>

to your header.php right above #et-top-navigation so it looks like this:

You just made a new menu show up in the header. Now you need to go to the WP backend and add items to the menu, and style it.

 

The build

Go to “appearance > customize” and then “header & navigation > header format > slide in”. This will put the primary menu into a slide in panel + hamburger.

Now that you have your menus ready, you can add items to it on the “appearance > menus” page in the backend.

1. On the new menu, just put some stuff you want in there.

 

2. On your “primary menu” add everything you need, including the items that went in the center menu.

The reason is because the center menu will disappear on mobile, so you will need them to show up in the (slide in) primary menu. The only thing we’ll do to them is we’re going to add ‘hide-on-desktop’ class to the menu items we want to.. hide on desktop.

 

The css

Take this CSS and edit some stuff for the text if needed.

.extra_menu_class {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.extra_menu_class .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.extra_menu_class .menu .menu-item {
  margin: 0 14px;
}
.extra_menu_class .menu .menu-item a {
  font-size: 16px;
  font-weight: 700;
  color: black;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.extra_menu_class .menu .menu-item:hover a {
  opacity: .6;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.extra_menu_class .menu .menu-item.current-menu-item a {
  color: red;
}
@media all and (min-width: 981px) {
  .hide-on-desktop {
    display: none;
  }
}
@media all and (max-width: 980px) {
  .hide-on-desktop {
    display: list-item;
  }
  .extra_menu_class {
    display: none;
  }
}

Please note: I have taken out the # part because there’s no specificity fight going on, so a few classes work fine.

And there you have it. Pretty neat eh?

I ended up using this on a new project website I’m working on. I think it’ll work really well.

Since I just mentioned it.. if you want to stay up to date on all the stuff I’m working on, then please sign up for my newsletter. I’ll have some cool news soon.

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

If you want to learn CSS to customize things yourself..

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

If you want to dive into responsiveness,

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

Hamburger Photo by Bobby Rodriguezz on Unsplash