Website – Creating the Header

Purpose

The website header is the top section of the web page on a website. A website header typically contains the company logo, contact info, social media links and the menu This document will describe design considerations and the creation of a website header.

Prerequisites

  • A valid domain
  • Web-hosting
  • WordPress installation
  • WordPress Settings setup
  • WordPress Appearance setup (Including Divi Theme and Child Theme Installation)

Solution

Log in to the admin page of your WordPress website which should take you to the Dashboard

Divi Theme Options

Near the bottom of the left-hand menu pane hover over Divi and select Theme Options
To the right of Logo click on the UPLOAD button
Click on the Upload files tab, click on the Select Files button, browse to your logo file and click on the Upload button
With the logo select in the Media Library click on the Set As Logo button
To the right of Color Pickers Default Palette setup the colors in accordance with your branding
(the colors in this palette will show up as the default colors in all of the Divi Modules)
By default Social Media Icons are enabled so click to disable each of them
At the bottom left-hand corner of the window click on the Save Changes button

Theme Customizer

Near the bottom of the left-hand menu pane hover over Appearance and select Customize
In the left-hand window pane click on Header & Navigation then click on Header Elements
Uncheck the check-box next to SHOW SOCIAL ICONS
Uncheck the check-box next to SHOW SEARCH ICON
Clear any data in the PHONE NUMBER and EMAIL fields
Click on the Publish button to save changes
Near the top of the left-hand menu click on the back arrow next to Header Elements
Near the top of the left-hand menu click on the back arrow next to Header &. Navigation
At the top left-hand corner click on the X to exit the Customizer

Theme Editor

There are two design implementations that are part of the Divi Theme. The first is that Page and Post titles are automatically displayed. The second is that between the Menu and the Body a thin separation line exists. Bothe of these design elements can be removed with CSS code.

Near the bottom of the left-hand menu pane hover over Appearance and select Theme Editor
Copy and paste the code below into the CSS window:

/*---------------------- Globaly Hide Page & Post Titles ------------------------*/

.entry-title {
display: none;
}

/*---------------------------- Customize Top Header -----------------------------*/
/*---------------------- Remove Seperation Line Under Menu-----------------------*/

#main-header {
    box-shadow: 0 0px 0 rgb(0 0 0 / 10%);
}

/*----------------------------- Vertical Alignment ------------------------------*/
.vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

At the bottom left-hand corner of the window click on the Update File button

Menu

In the left-hand menu hover over Appearance and select Menus
Under the Menu structure section in the Menu Name field type Main Menu
Under the Menu Setting location to the right of Display location check the check-box next to Primary Menu
Click on the Create Menu button
Under the Add menu items section check the check-boxes next to About Us, Divisions, Partners, Sales and Services then click on the Add to Menu button
Now grab each menu item and place it in the following order from left to right:
(Services Sales Partners Divisions About Us)
In the lower right-hand corner click on the Save Menu button
Under the Edit Menus tab click on the link for create a new menu
Under the Menu structure section in the Menu Name field type Second Menu
Under the Menu Setting location to the right of Display location check the check-box next to Secondary Menu
Click on the Create Menu button
Under the Add menu items section check the check-boxes next to Contact Us and Shop then click on the Add to Menu button
Now grab each menu item and place it in the following order from left to right:
(Contact Us Shop)
In the lower right-hand corner click on the Save Menu button

Theme Builder

Near the bottom of the left-hand menu pane hover over Divi and select Theme Builder
Under Divi Theme Builder click on Add Global Header
From the pop-up menu click on Build Global Header
With the section still empty move over to the top-left of the section and click on the settings icon
Expand the Background section and select the background color
Click on the Design tab
Expand the Sizing section
In the Width field type 100%
In the Max Width field type 100%
Hover mouse to the right of Max Width and click on the mobile icon
Click on the Tablet button and in the field enter 100%
Click on the Phone button and in the field enter 100%
Click on the Desktop button
Under Section Alignment click on the center button
Under Setting Click on the Advanced tab
Expand the Visibility section
Under Horizontal Overflow click on the drop-down menu and select Hidden
Hover mouse to the right of Horizontal Overflow and click on the Pointer icon
Click on the Pointer button
Click on the pull-down menu below and select Visible
Under Vertical Overflow click on the drop-down menu and select Hidden
Hover mouse to the right of Vertical Overflow and click on the Pointer icon
Click on the Pointer button
Click on the pull-down menu below and select Visible
Expand the Scroll Effects section
Under Sticky Position click on the pull-down menu and select Stick to Top
At the bottom-right click on the Green Check button to save
Click on the Green Plus button to add an new row and select the four equal columns
With the first column open to Insert Module select the Image module
Click in the Image frame upload and/or select the company logo then click on the Upload an image button
Click on the Design tab
Expand the Alignment section and click on the Center button
Expand the Sizing section and in the Max Height field type 96px
Hover mouse to the right of Max Height and click on the mobile icon
Click on the Tablet button and in the field enter 48px
Click on the Phone button and in the field enter 48px
Expand the Spacing section and under Padding add 6px to Top and Bottom
At the bottom-right click on the Green Check button to save
In the second column click on the black plus button to open Insert Module and select Text module
In the Text field type:

Your trusted technology
solutions provider

Click on the Design tab
Under Text Font click on the pull-down menu and select Legend Deca
Under the Text Font Weight click on the pull-down menu and select Bold
Under Text Alignment click on the Center button
At the bottom-right click on the Green Check button to save
In the third column click on the black plus button to open Insert Module and select the Social Media Follow module
Click on the gray plus button and to add a social network
Under the Social Network pull-down menu select Facebook
Click on the Design tab
Expand the Border section and in Rounded corners type 16px
At the bottom-right click on the Green Check button to save
Click on the gray plus button and to add a social network
Under the Social Network pull-down menu select Google
Click on the Design tab
Expand the Border section and in Rounded corners type 16px
At the bottom-right click on the Green Check button to save
Click on the gray plus button and to add a social network
Under the Social Network pull-down menu select LinkedIn
Click on the Design tab
Expand the Border section and in Rounded corners type 16px
At the bottom-right click on the Green Check button to save
Click on the gray plus button and to add a social network
Under the Social Network pull-down menu select Yelp
Click on the Design tab
Expand the Border section and in Rounded corners type 16px
Click on the gray plus button and to add a social network
Under the Social Network pull-down menu select Image Icon
In the Image frame click on the gray plus button to choose the social network icon
In the center of the window click on the Select Files tab
Navigate to the image file and click on the Upload files tab
At the bottom-right of the window click on the Upload Files button
In the Icon Title field type Follow on Alignable
Click on the Design tab
Expand the Border section and in Rounded corners type 16px
At the bottom-right click on the Green Check button to save
Click on the Design tab
Expand the Alignment section
Under Module Alignment click on the Center button
At the bottom-right click on the Green Check button to save
In the fourth column click on the black plus button to open Insert Module and select the Menu module
Under Menu click on the pull-down menu and select Second Menu
Expand the Background section and select Transparent for the color
Click on the Design tab
Expand the Layout tab and under Style select Centered
Expand Menu Text, click on the pull-down menu under Menu Font and select Legend Deca
Click on the pull-down menu under Menu Font Weight and select Bold
Under Menu Text Color select White
Under Menu Text Size enter 16px
At the bottom-right click on the Green Check button to save
Expand the Layout tab and under Style select Centered
At the bottom-right click on the Green Check button to save
Go to the wire-frame view
At the first row click on the row settings sprocket
Click on the Settings sprocket for the fourth column
Expand the Background section and select the color Black
Click on the Design tab
Expand the Border section and in the center frame click the link to free the values
For the top-left and top-right corners enter 27px

At the bottom-right click on the Green Check button to save
Go to the wire-frame view
Click on the row settings
Click on the Design tab
Expand the Sizing section
Under Equalize Column Heights click on the switch to turn it on
Under Width move the slider to 100%
Under Max Width change it to 1224px
Under Row Alignment click on the Center button
Under Height change it to 54px
Under Max Height change it to 54px
At the bottom-right click on the Green Check button to save
Click on the Green Plus button to add an new row and select the four equal columns
With the first column open to Insert Module select Divider
With the Visibility section expanded, under Show Divider click on the switch to display NO
At the bottom-right click on the Green Check button to save
Clone the Divider module and move it over to the third column
In the second column click on the black plus button to open Insert Module and select the Menu module
Under Menu click on the pull-down menu and select Main Menu
Expand Background and select Transparent for the color
Click on the Design tab
Expand the Layout tab and under Style select Centered
Expand Menu Text, click on the pull-down menu under Menu Font and select Legend Deca
Click on the pull-down menu under Menu Font Weight and select Bold
Under Menu Text Color select White
Under Menu Text Size enter 16px
At the bottom-right click on the Green Check button to save
In the third column click on the black plus button to open Insert Module and select the Button module
With the Text section expanded in the Button field type in the phone number
Expand the Link section and type tel:15037651377
Click on the Design tab
Expand the Alignment section and click on the Center button
Expand the Text section and under Text Color click on the pull-down menu select Light
Expand the Button section and under Use Custom Styles For Button click on the switch to flip to YES
Under Button Background color select Dark Gray
Under Button Boarder Radius, in the field enter 24px
Under Button Font click on the pull-down menu and select Legend Deca
Under Button Font Weight click on the pull-down menu and select Bold
Under Show Button Icon click on the switch to flip to YES
In the Button Icon selection window choose the Handset icon
Under Button Icon Color choose Black
At the bottom-right click on the Green Check button to save
In the first row click on the Image module settings
Click on the Design tab
Expand the Spacing section and under Margin in the Bottom field type 100%
At the bottom-right click on the Green Check button to save
In the second row click on the Menu module settings
Click on the Design tab
Expand the Spacing section and under Margin in the Right field type 100%
At the bottom-right click on the Green Check button to save
Click on the row settings for the second row
Click on the Design tab
Expand the Sizing section
Under Equalize Column Heights click on the switch to turn it on
Under Width move the slider to 100%
Under Max Width change it to 1224px
Under Row Alignment click on the Center button
Under Height change it to 54px
Under Max Height change it to 54px
Expand the Spacing section and add 6px to the Padding on Left and Right
At the bottom-right click on the Green Check button to save
Click on the Settings sprocket for the second row
For each column that you wish to have vertically centered click on the Sprocket for that column and click on the Advanced tab
Expand the Custom CSS section and under Main Element enter the following code:

display: flex;
flex-direction: column;
justify-content: center;

Click on the Settings sprocket for the second column
Expand the Background section and select the color Black
Click on the Design tab
Expand the Border section and in the center frame click the link to free the values
For the top-left and top-right corners enter 54px
At the bottom-right click on the Green Check button to save