These days’s put up is ready combining two essential parts for your website online: header and navigation. This distinctive design organizes a couple of buttons within your header to function a navigation menu this is each practical and tasty.

This design would paintings nice for private websites that need to stay issues easy and blogs that wish to show off classes in a recent manner.

If the rest, I’m hoping this may occasionally encourage you to construct some other nice design with Divi.

Sneak Peek

navigation header final design

navigation header final design

All You Want is Divi

For this instructional I’m going to make use of the Divi visible builder to design this navigation header. I feel you are going to benefit from the easy but robust manner Divi lets you create one thing totally distinctive.

I can offer you an alternate design involving including a picture background in your buttons, so it would be best to use pictures with a dimension of 100px by means of 150px for those who pass down that highway.

Designing the Header Segment

Let’s get issues rolling by means of developing a brand new web page and deploying the visible builder. Via default, there will likely be a piece ready so that you can edit on the best of the web page. Pass to the segment settings and upload a background symbol and gradient overlay by means of updating the next:

Background Symbol: [insert 1920px by 1080px image]
Background Gradient Left Colour: rgba(127,23,60,0.61)
Background Gradient Proper Colour: rgba(127,23,60,0.59)

Position Gradient Above Background Symbol: YES

navigation header section bg

Then upload some best and backside padding to provide our long term content material some respiring room.

Customized Padding: 10vw Best, 10vw Backside

I really like the use of the vw length unit right here as it does a excellent activity retaining content material above the fold on other display sizes.

navigation header section padding

Growing the Row

Now set your column structure inside your row to be one-third one-half one-third.

navigation header set column layout

Then edit the row settings to set your column 2 background colour to #ffffff.

navigation header column 2

And replace the design settings as follows:

Make This Row Fullwidth: YES
Use Customized Gutter Width: YES
Gutter Width: 1
Equalize Column Heights: YES

This creates more room for our long term navigation buttons at the left and proper. The gutter width set to at least one removes the margins between columns in order that our buttons can simply be located on each and every facet of our heart column content material.

navigation header

Designing the Name Segment

For the center identify segment we’re going to stack a textual content module and a social media apply module.

Upload the Name

First upload a textual content module to the center column and replace the next:

Content material:

Christina Value

Workout & Health

Since it is a web page identify, I used the h1 tag. I additionally wrapped the subtitle textual content ampersand (&) in a span tag with a customized colour and font dimension so as to add slightly aptitude to the textual content design.

navigation header title content

Now pass to the design tab and replace the next:

Textual content Font: Lato
Textual content Textual content Colour: #333333
Textual content Textual content Measurement: 2vw (desktop), 30px (pill), 22px (smartphone)
Textual content Orientation : Middle

Heading Font: Montserrat
Heading Font Weight: Daring
Heading Font Taste: TT
Heading Textual content Colour: #333333
Heading Textual content Measurement: 3vw (desktop), 40px (pill), 32px (smartphone)

Customized Padding: 5vw Best, 2vw Backside

navigation header title design

Upload the Social Apply Icons

So as to add the social icons, upload a social media apply module below the textual content module.

navigation header add social module

Upload 4 social networks to the module, each and every with the similar background colour:

background colour: #7f173c

navigation header social bg color

Then set the thing alignment to middle.

navigation header item alignment

Designing Left Column Navigation Header Buttons

To design the navigation buttons at the left column, we’re going to get started by means of designing one button after which duplicating that button to assist us create the remainder.

To create the primary button, upload a button module to the left column and replace the next:

Button Textual content: meet Christina

Below the design tab…

Button Alignment: Proper
Use Customized Kinds for Button: YES
Button Textual content Measurement: 1.5vw (desktop), 16px (pill)
Button Textual content Colour: #333333
Button Background Colour: #ffffff
Button Border Width: 4px
Button Border colour: #ffffff
Button Border Radius: 0px
Button Icon: your selection
Button Icon Colour: #7f173c
Button Icon Placement: Left
Handiest Display Icon On Hover For Button: NO
Customized Margin: 4px Proper

navigation header button design

Save settings.

Then replica that button, replace the content material (button textual content, icon, hyperlink url, and so on.) and upload a customized best margin of 5px.

navigation header second button design

Save Settings.

Now replica that module 3 extra instances and replace the button content material for each and every. You’ll have a complete of 5 buttons adjoining to the center column.

navigation header left column final

Realize that as a result of our row is about to have equivalent column heights, the peak of the left column with the buttons additionally pulled down the center column to check the peak.

Designing Proper Column Navigation Header Buttons

To create the buttons in the appropriate column pass forward a replica the highest button within the left column and paste it into the 1/3 column.

Then replace the button content material (button textual content, icon, hyperlink url, and so on.) and replace the next settings.

Button Alignment: Left
Button Icon Placement: Proper
Customized Margin: 4px Left, 0px Proper

navigation header

Now replica the button you simply created and replace the spacing to have a customized best margin of 4px.

navigation header

Save settings.

Then replica that module 3 extra instances and replace the button content material for each and every. You’ll have a complete of 5 buttons adjoining to the center column.

Take a look at the overall design.

navigation header final design

Upload Pictures to the Buttons

As another design possibility, you’ll transfer you button icons for pictures. To try this it is very important use pictures which are 100px by means of 150px in dimension.

For instance, so as to add a picture to the left column buttons, edit the button module settings as follows:

Background Symbol: [enter 100×150 image]
Background Symbol Measurement: Have compatibility
Background Symbol Place: Middle Left
Display Button Icon: NO
Customized Padding: 2.2em Left

navigation header image button

So as to add a picture to the appropriate column buttons, edit each and every of the button module settings as follows:

Background Symbol: [enter 100×150 image]
Background Symbol Measurement: Have compatibility
Background Symbol Place: Middle Proper
Display Button Icon: NO
Customized Padding: 2.2em Proper

navigation header right button image

If you upload pictures to your whole buttons, here’s what the design would appear to be.

navigation header button images final

Responsive Choices for the Navigation Header

At this time the design will paintings on cellular gadgets and can appear to be this:

navigation header mobile view

However that might not be precisely how you need it. Chances are you’ll need to take into accounts a few different choices.

Disguise buttons on Cell

A easy and practical answer for this design on cellular is to cover your buttons on pill and smartphones and simply use your precise number one cellular navigation menu as a fall again.

To cover a button, merely pass to the button module complex settings and test to disable the module on pill and smartphone.

navigation header hide buttons

The end result would appear to be this on pill and smartphone.

navigation header hide button image

Complicated Resolution: Trade column order on Cell

If you wish to replace the column order on cellular in order that the identify segment (recently in the second one or heart column) shows on the best (or first so as), you’ll upload a couple of traces of customized CSS.

Open the primary settings menu on the backside of the visible builder after which click on the web page settings button. Then input the next within the Customized CSS enter field:

@media (max-width:980px) {
/*** elegance that can wrap row in a flex field ***/
.change-column-order {
  show: -webkit-box;
  show: -moz-box;
  show: -ms-flexbox;
  show: -webkit-flex;
  show: flex;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  flex-wrap: wrap;

/*** customized categories that can designate the order of columns within the flex field row ***/
.one {
     -webkit-order: 1;
     order: 1;
.two {
     -webkit-order: 2;
     order: 2;
.3 {
     -webkit-order: 3;
     order: 3;
/*** adjustments buttons to complete width and facilities button textual content ***/
.change-column-order .et_pb_button {
      text-align: middle !essential;

navigation header

This css reorders the columns and adjustments your buttons in order that they span the fullwidth of the column with the textual content focused. This system for changing the column stacking order on cellular does come in useful.

Now pass in your row settings, below the complex tab, and upload the category “change-column-order” to the CSS Magnificence enter field. Then upload “one” to the Column 2 CSS Magnificence enter field, upload “two” to the Column 1 CSS Magnificence enter field, and upload “3” to the Column 3 CSS Magnificence enter field.

navigation header order classes

You will have so as to add 4px margin to the highest proper column button on pill and smartphone in order that the separation is constant.

Here’s the overall end result.

navigation header mobile view

Ultimate Ideas

This tradition navigation header design is usually a distinctive selection to a conventional navigation menu. It isn’t supposed in its place in your number one navigation. In reality, this might paintings in point of fact smartly as a sub navigation for weblog classes or one thing an identical.

I’m hoping the responsive fallbacks aren’t too problematic and the answers introduced will likely be useful.

I sit up for listening to from you within the feedback about different concepts on learn how to use this design and some other ideas or questions you could have.


The put up How to Design a Creative Navigation Header with Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]