Creating a Divi MadMenu Header. Part 1: Main Menu Bar
In this first tutorial(the Part 1) we will create the main menu bar part of the header.
The main menu bar has a centered logo and two buttons on the right side: the Menu and Account buttons.
Main Menu Bar
We’ll create the main menu bar using a Divi MadMenu module with the Logo, Button One(the Menu button) and Button Two(the Account button) elements enabled.
Let’s go to Divi -> Theme Builder, create a new header template and add a regular section, a row with a single column and a Divi MadMenu module to it.
We need to enable only three elements of the Divi MadMenu module: the Logo, Button One and Button Two, add the logo image and set the module background color to #002366.
To be able to see the MadMenu module elements structure let’s enable the outlines in Content -> Builder Settings -> Show Outlines and set the outlines color that contrasts with the background, this will help us with setting the header elements alignment.
As you can see, the elements are aligned to the left side by default but we need the logo to be centered and both buttons aligned to the right side.
To align the elements we’ll use the MadMenu module layout settings in Design -> Layout: Elements section.
Since the buttons need to be pushed to the right side of the header we can simply set the the Logo element’s column width to auto in Design -> Layout: Elements -> L tab -> Logo Column Width.
Setting an element column width to auto makes it occupy all the available space and push all other elements to the sides(in this case both buttons are pushed to the right side of the header).
We need the logo to be centered and it seems to be centered now, however, it’s only centered within it’s column but not the header as a whole. And that’s because the button elements are pushing it to the left.
To fix that we just need to set the button elements’ column widths and then apply a padding-left to the module (in Design -> Spacing -> Main Padding) equal to the button elements’ combined width values.
Let’s set the button column widths to 72px each which makes 144px in total, so, we need to set the module padding-left to 144px.
Now the logo is centered.
Next we need to make the logo smaller and add some spacing to top and bottom.
To do that let’s adjust the Logo element margin and padding and also set the logo image width in Design -> Logo section:
- Set logo margin for Desktop: 10px 10px 5px 5px.
- Set logo padding: 0px 0px 0px 0px.
- Set logo margin for mobile: 6px 6px 5px 5px.
- Set logo width: 54px.
- Set logo max-width: 54px.
Now let’s create the Menu button using the Button One element.
Let’s first add the button content in Content -> Button One section:
- Add the Menu text.
- Enable the button icon.
- Select the Image Icon option as the button icon type.
- Add a hamburger menu image icon (you can download one from here).
- Place the icon Above the button text.
Then let’s style the button text in Design -> Text: Button One:
- Set the font to Montserrat.
- Set the font weight to bold.
- Set the font style to uppercase.
- Set the text color to white (#ffffff).
- Set the text size to 10px.
The Menu button looks like this so far:
This is not what we need yet, so, let’s go to the Button One design settings in Design -> Button One and style it:
- Remove button margin.
- Increase the gap between the icon and text by applying a 6px margin-top to the button text.
- Apply the button background color (#fa8072).
- Set border radius to 0px.
- Set the icon width to 20px.
- Set the button border to 0px.
Almost there. The last thing we need to do is to make the button cover it’s column entirely by stretching it both vertically and horizontally.
To do that let’s go to Design -> Layout: Elements -> B1 tab and select the Stretch option for both the Vertical Alignment and Horizontal Alignment settings.
Repeat all the settings for the Button Two element to create the Account button. It has a similar design as the Menu button except for the icon, text and the button background color which needs to be transparent.
The header bar needs to be fullwidth and fixed, so, let’s do that first before we continue with the responsive settings.
To make the header fixed go to MadMenu Settings -> Advanced -> Position section:
- Enable the Fixed Header.
- Prevent the fixed header from overlapping the page content.
- Set it a z-index of 2. We’ll need this in Part 2 where we create the horizontal slide-in menu.
Now let’s make the header fullwidth by setting the content max-width to 100% (Divi MadMenu content default max-width is 1080px).
Finally, we need to remove the default margin and padding of the section and the row that contain our Divi MadMenu module(the main menu bar) so that these elements do not occupy any space on the page.
To do that go to Design -> Spacing settings of both the section and row and set all margin and padding values to 0px.
After applying all the settings above our mobile header looks like this so far.
We don’t need to apply any specific settings for the Tablet header, however, the final Phone header design looks slightly different.
None of the buttons on Phone have text, the Menu button(the orange one) has been moved to the right of the Account button, and the Account button is not stretched but has a circular shape with semi-transparent background color.
Also the header height and the width of the buttons have been decreased as well.
So, let’s apply all these changes for the Phone device.
Menu Button on Phone
To remove the button text go to MadMenu Settings -> Content -> Button One and enable responsive settings for the Button One Text and delete text for Phone device (the text field must be empty).
Note that you need to add the text for Tablet as well after enabling responsive settings, otherwise it won’t appear on Tablet (it won’t inherit the text value from Desktop).
- Remove text.
- Set the Menu button order to 1 to move it further to the right of the Account button.
- Set the button width to 50px.
- Remove the text margin(because we don’t have button text on Phone anymore).
Account Button on Phone
For the Account button we need to apply the following changes for Phone device:
- Remove button text.
- Center the button vertically.
- Center the button horizontally.
- Set the column width to 50px.
- Set the button margin-right to 8px.
- Remove text margin.
- Set the button background color to rgba(255, 255, 255, 0.15).
- Set the border radius to 50px to give the button a circular shape.
Main Menu Bar on Phone
Since we’ve changed the button elements’ width values the logo is not centered on Phone anymore. We need to fix that by adjusting the main container padding-left as well.
We’ve set the main padding-left to 144px for desktop because on desktop the buttons on the right have combined width of 144px.
However, since the buttons are smaller on Phone (50px each), we need to set the main container padding-left to 100px on Phone, this will make the logo centered on Phone as well.
Also we need to add the orange bottom border to the header.
- Set main container 100px padding-left in Design -> Spacing -> Main Padding.
- Set bottom border width in Design -> Border (4px).
- Set bottom border color in Desing -> Border (#fa8072).
In this tutorial we’ve created the main menu bar part of the Divi MadMenu Header Template #13.
We can now move on to the Part 2 of this tutorials series in which we’ll be creating the horizontal slide-in menu which slides in from top when the user clicks the Menu button.