© 2018, Divi Stream.

Vertical Nav

Full Screen Vertical Navigation

by | Aug 29, 2018 | Tutorials | 0 comments

Smart web designers, such as yourself, also know that the layout of your website appeal to how visitors read web pages. The navigation bar is a matter of great importance for your website. It provides the backbone structure for your content. Eyetracking research shows visitors spend disproportionately more viewing time on the left half of the page versus on the right half (watch the video below). So let’s pull your Divi navigation bar to the left side of the screen!

Let’s get started

To help users find your navigation bar even faster, you can make it stand out. For instance you can make the default Divi navigation pull to the left, add a hamburger icon that triggers the fullscreen menu, add a niche animation to it and add a copyright statement with logo. For an example you can check out our websites navigation bar (if you haven’t already). It is enabled only for desktop devices. Let’s get on with building the navigation bar.

Building the Navigation

In order for us to build the vertical navigation bar we need to tick off some requirements, modify the header.php file, add some CSS and finalize the result.

Requirements

For this tutorial we are creating a vertical header with the fullscreen menu option selected. Go to your theme customizer and select Header & Navigation -> Header Format and for Header Style select ‘Full Screen‘. We also need to hide the logo image because we are adding it some place else. To hide the logo go to the theme customizer and select Header & Navigation -> Primary Menu Bar and check the box ‘Hide Logo Image’.

This options allows you to use the default Divi navigation and require less configuration. If you do not want to add any additional content to the header then you can skip to the CSS part of this tutorial. If you do want additional content in the vertical navigation be sure to have  a Divi Child Theme active. (you can easily create a Divi Child Theme here).

Modify header.php

To display custom content within the Divi navigation bar we need to add a little bit of code to the header.php file. We highly recommend for you to use a child theme and not edit the header.php file in the Divi theme folder. If you are unfamiliar with child themes please read Divi Life’s latest blog post about child themes.

To actually modify the header.php file you can copy it to your child theme using a SFTP tool like FileZilla. WordPress will automatically pull the file from your child theme.

Within our header.php file we place the following code on after the <!– #et-top-navigation –> declaration (line 311):

<div class=”header__content”>
<span class=”content__seperator”></span>
© 2018, <a href=”/”>YOUR TITLE</a>
</div>
That’s all for modifying the header.php file. When you load the screen you may notice that the header is kinda messed-up. This is where we add some CSS to style the navigation and make it vertical.

Add some CSS

In order to make the header pull to the left and style the content that we added in the header.php file, we need to add some CSS to our Divi theme settings.

We only want the header to be vertical on non-mobile devices. Otherwise the header would eat to much space on a mobile screen. Therefore we wrap our CSS in a mobile query. The following CSS Should be added to your Divi Themes’s Settings:

* Standard Divi Desktop minimal width */
@media all and (min-width: 981px) {
#main-header {
height: 100%;
max-width: 80px;
position: fixed;
-webkit-box-shadow: 0 0 7px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 7px rgba(0,0,0,.3);
box-shadow: 0 0 7px rgba(0,0,0,.3);
}
.et_header_style_left .logo_container {
position: relative;
}
.container.et_menu_container {
height: 100%;
text-align: center;
}
#et-top-navigation {
display: block;
position: fixed;
left: 0;
width: 80px;
margin: auto;
}
.et_header_style_fullscreen .mobile_menu_bar.et_toggle_fullscreen_menu {
display: block;
margin: auto;
margin-top: 15px;
}
/* style hamburger menu item */
.mobile_menu_bar:after {
position: absolute;
top: 0;
left: 0;
width: 20px;
font-family: ETmodules!important;
font-size: 32px;
font-weight: 400;
content: “\61″;
cursor: pointer;
color: #fff;
}
/* Add a niche effect on hamburger menu hover */
.mobile_menu_bar:hover:after {
opacity: 0.6;
}
.mobile_menu_bar:before {
content: ”;
width: 46px;
height: 46px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
top: -24px;
left: -8px;
-webkit-transform: scale(.8);
-ms-transform: scale(.8);
transform: scale(.8);
-webkit-transition: .15s ease-in-out;
transition: .15s ease-in-out;
-webkit-transition-property: background,-webkit-transform;
transition-property: background,-webkit-transform;
transition-property: transform,background;
transition-property: transform,background,-webkit-transform;
}
.mobile_menu_bar:hover:before {
background: rgba(0,0,0,.06);
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
/* Style the header.php content */
.header__content {
color:#fff;
width: 70vh;
padding-left: 5vh;
font-family: ‘Work Sans’;
font-size: 28px;
font-weight: 300;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
}
.header__content:before {
background-image: url(‘/wp-content/uploads/2018/07/header-logo-small.png’);
background-size: 60px 60px;
width:60px;
height:60px;
position:relative;
display: inline-block;
vertical-align: middle;
content: “”;
}
.header__content a {
opacity: 1;
transition: all 0.2s ease;
}
.header__content a:hover {
opacity: 0.7;
}
}

@media all and (max-width: 980px) {
.header__content {
display:none;
}
}

Results

When the CSS is added, save your changes and check your website and see the changes that have been applied through the CSS. If your header is now vertical, with a fullscreen menu and showing your content added in the header.php file, then you have successfully created a fullscreen vertical header for Divi! Did this tutorial somehow not work? Then download the files below and leavea reply!

Rate this article!
Love
Haha
Wow
Sad
Angry