Header Layouts
Customize these layouts to match your Logo, Colors, Images, and Text – everything is customizable. You can easily “mix and match” between layout, add sections, and a lot more!
HEADER 01
- Two Colum Header.
- Menu and Button in separate modules
HEADER 02
- Logo is part of menu.
- CSS – Button width property 100%
- CSS – Menu Logo, margin-top: -50px
CSS Menu Module – Menu Logo:
margin-top:-50px;
CSS Button Modules – Main Element
width:100%;
text-align:center;
HEADER 03
- Logo is part of menu.
- CSS – Button width property 100%
- CSS – Menu Logo, margin-top: -50px
CSS Menu Module – Menu Logo:
margin-top:-50px;
CSS Button Modules – Main Element
width:100%;
text-align:center;
HEADER 04
- Complements Home 3 Layout (but can be used on any site
- The logo shows on Scroll – is hidden on desktop with Opacity – sticky setting (see below)
Cool Effect. When you Scroll the Logo will show. To make this happen:
First, make the menu module Sticky
1. Under the Menu Settings / Image Opacity section click on Desktop and set this to 0%
2. Next Click on the Sticky Icon and set to 100% (when you start to scroll, this will then appear)
Get a Free quote!
Call Today and Speak To an Experienced Professional
Call Us Today
HEADER 05
Top Rated Local Business Pros for Commercial & Residential Properties
HEADER 06 (e-commerce)
Inserted in Divi’s CSS Box:
/*place button modules next to each other in the same column*/
.my-inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
}
/*place button modules next to each other in the same column*/
.my-inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
}
.my-inline-buttons {
text-align: right !important;
}