Header

Overview

In this tutorial let’s look at some of the options available in Enfold to create different types of Headers.

Not all websites are the same so the header requirements for each site can dramatically change. We will go beyond the theme options and explore various ways to customize the Headers using custom code.

Header Settings

Let’s take a look at different header styles and settings available in the enfold theme.

General Header Settings

Header settings can be accessed from:

  • Enfold > Header
  • Dashboard > Page or Post > Layout > Header visibility and transparency
  • To set up a vertical header go to Enfold > Layout > Logo and Main Menu
  • To change the header styles go to Enfold > General Styling > Logo area

Header Layout

Enfold comes with the following built-in header layouts which can be accessed from Enfold > Header > Header Layout > Menu and Logo Position

  • Logo left, Menu right
  • Logo right, Menu Left
  • Logo left, Menu below
  • Logo right, Menu below
  • Logo center, Menu below
  • Logo center, Menu above

Transparent Header

To activate the Transparent or Glassy header open the WordPress Dashboard > Page/Post > Layout > Header visibility and transparency

To set transparency header styles go to Enfold > Header > Transparency Options

Header Behavior

By default, the header will display on Top of the content. You can change this by setting any of the following types of header behavior from Enfold > Header > Header Behavior 

  • Sticky Header.
  • Shrink Header on page scroll.
  • Unstick topbar (The small top bar above the header will no longer stick to the top)
  • Let logo and menu position adapt to browser width.

Header Styles

Header styles such as background color, image, text color, link color, border can be changed from

  • Enfold > General Styling > Logo Area
  • Enfold > Header > Header Style 

Extra elements

Extra elements mentioned below can be displayed in the header. To access the extra elements settings go to Enfold > Header > Extra Elements

  • Social Icons
  • Secondary Menu
  • Header Phone Number/Extra Info

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Customization

Custom header width

By default Header width is set to width of the content which can be set in Enfold > General Layout > Dimensions > Maximum Container width

Full width header
If you like the header to take up 100% width of the browser window go to Enfold > Header > Header Behavior > Let logo and menu position adapt to browser window

If you like to have a custom width header please use the CSS below.

/* Custom width header */
#top #header .container {
    width: 800px;
    max-width: 100%;
}

Custom header height

Header height can be changed from Enfold > Header > Header Layout > Header Size ( Slim | Large | Custom Pixel Value )

For some reason, if you like the header height to be more than the value available in the theme options you can always use the CSS below.

 /* Custom header height */
#header .container, 
.main_menu ul:first-child > li > a {
  height: 40px  !important;
  line-height: 40px  !important;
}

#top #main {
  padding-top: 40px;
}

Header height in mobile device

/* Header height in mobile */
@media only screen and (max-width: 767px) {
    #header .container {
        max-height: 50px;
    }
    #header {
        height: 50px;
    }
    .responsive .logo img {
        max-height: 50px;
    }
    .responsive .logo a {
        vertical-align: top;
    }
}

NOTE: In the above code the value of height, line-height and padding-top should be the same.

Set transparent header as default header style

To set the transparent header as a default header style for all page and post please add the below code to your functions.php

add_action( 'after_setup_theme', 'enfold_customization_product_switch' );
function enfold_customization_product_switch(){
  add_filter('avf_builder_elements', 'avf_builder_elements_mod');
}

function avf_builder_elements_mod($elements)
{
  $counter = 0;
    foreach($elements as $element)
    {
    if($element['id'] == 'header_transparency')  {
            $elements[$counter]['std'] = 'header_transparent header_glassy ';
        }

        $counter++;
    }

  return $elements;
}

Adding a header widget area

If you are wanting to add a widget area to your header then add this to the bottom of your functions.php file.

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
  dynamic_sidebar( 'header' );
}

Note: in case you’re using a layout with the menu below the header area use this code instead:

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
  dynamic_sidebar( 'header' );
}

And then navigate to Dashboard > Appearance > Widgets and create a new widget area named header and add some widgets to it.

Header widget position

Header widget position.

Using custom CSS we can target the header elements such as Logo, Main menu and the Widget area 🙂

Below are the example layouts we are going to build using the custom flexbox CSS. To change the position of the header elements please change the order of logo, menu and widget area to 1,2 or 3 in the below code. Let us take a look at some examples:

Widget area in the middle

In the below example the flex order for logo is 1, flex order of widget is 2 and menu is 3.

Widget area on the right

In the below example the flex order for logo is 1, flex order of menu is 2 and widget is 3.

Widget area on the left:

Unlike the above examples notice how the entire header width is filled by the header elements? It’s because we have used flex-grow on the menu element to give it the maximum width and changed the flex order of the widget area to 1, Logo order to 2 and menu order is set to 3.

Widget area on the right: The order of the header element change in the below example: Logo:1 Menu:2 and Widget:3 However flex grow value of the menu item is higher than the other elements hence it takes the maximum width.

Widget area above the header

To move the header widget area above the logo and menu, change the order:  widget:1, logo:2 and menu:3. Additionally to make the widget area 100% wide, add the flex-basis:100%  rule to the widget area.  Copy the below code and add it to the final “header widget position” code and don’t forget to change the order value for logo and menu.

/* Header widget above logo and menu */

#header_main {
/* Adjust the header height to make the content below it visible */
 height: 180px;
}

#top #header .widget {
    flex-basis: 100%;
    order:1;
}

Header widget below logo and menu

To move the header widget area below the logo and menu, change the order:  logo:1, menu:2 and widget:3. Additionally to make the widget area 100% wide, add the flex-basis:100%  rule to the widget area.  Copy the below code and add it to the final “header widget position” code and don’t forget to change the order value for logo and menu. Lastly, you also need to manually add the header height.

/* Header widget above logo and menu */

#header_main {
/* Adjust the header height to make the content below it visible */
 height: 180px;
}

#top #header .widget {
    flex-basis: 100%;
    order:3;
}

Header widget position in mobile view

/* Header widget position 

To change the order of menu, logo and widget

1. Example: Logo first, widget center and menu right.
update the order:x value in the below code 

order:1 .logo
order:3 .main_menu
order:2 .widget


2. Example: Menu left, Widget center and Logo right.
update the order:x value in the below code 

order:3 .logo
order:1 .main_menu
order:2 .widget

*/

.container.av-logo-container .inner-container {
    display: flex!important;
    background: #eee;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap:wrap;
}

#top #header .logo,
#top #header .main_menu,
#top #header .widget {
   position: relative;
}


/* Logo */
#top #header .logo {
    background: #ffdd00;
    order:1;
    /*flex-grow: 1;*/
}


/* Menu */
#top #header .main_menu {
    background: #0099e5;
    order:3;
    /*flex-grow: 2;*/
}


/* Header widget*/
#top #header .widget {
    background: #34bf49;
    padding: 0;
    order:2;
    /*flex-grow: 1;*/
}

/* Header widget Breakpoint */
@media only screen and (max-width: 850px) {

   .container.av-logo-container .inner-container {
        display: block !important;
    }
    #top #header .logo {
        display: inline-block;
    }
    /* Menu */
    #top #header .main_menu {
        display: inline-block;
        float: right;
    }
    #top #header .av-main-nav-wrap {
        float: right;
    }
    #top #header .widget {
        margin-top: -40px;
    }
}

How to hide the header?

You can show/hide header on selected pages from WordPress Dashboard > Pages/Posts > Layout > Header visibility and transparency

To hide the header on all pages please use the below CSS

/* Hide header on all pages */

#header { 
    display: none !important; 
}

To hide header only in mobile on all pages please use the below CSS

/* Hide header on mobile site-wide*/
@media only screen and (max-width: 990px) {
    #header { display: none !important; }
}

Top Bar

Styling the phone info

To style the phone number using custom CSS please use the below CSS.

 

/* Phone info font size */
.phone-info { font-size: 18px; }

/* phone link info styling */
.phone-info a { color: red; }
.phone-info a:hover { color: green; }

If you like to use multiple phone numbers:

Add the correct phone info in the below HTML and paste it in Enfold > Header > Extra Elements > Phone Number or small info text:

<a class="phone-info-top" href="tel:5555555555">Phone One  555-555-5555 </a>
<a class="phone-info-top" href="tel:5555555555">Phone Two  555-555-5555 </a>

Add the below CSS for multiple phone numbers to show up on same a line.

 
/* Phone info */
.phone-info-top {
  display:inline-block!important;
  padding:4px 10px;
}

Transparent sticky header

To make your sticky header transparent please use the below CSS.

 /* Transparent Sticky Header */ 
#header.header_color .header_bg {
    background: transparent;
}

Mobile Header

Transparent header on mobile

If you have activated the transparent header from the page/post > Layout > Header visibility and transparency by default on the mobile device the header is displayed above the content. If you like to display a transparent header on mobile please use the below CSS

/* Transparent header on mobile */
 @media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, 
.av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
}}

Sticky header on mobile

To make the header sticky on mobile device please use the below CSS

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 180px;
  }
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

Resource

Contributed Video