Free Divi fullwidth header layout with countdown timer, business info, social media links, and main button. For use with events countdown or coming soon announcement, or switch out modules to customize the layout further. On the demo site I’m using WooCommerce so I’ve included Woo-related elements but they don’t have to be used.
I’ve used a similar header and paired the ‘get email updates’ link with a popup plugin/extension to drop a signup form in, worked well for the client.
Notes
Download, unzip, and import the .json file into the Divi Theme Builder via the portability arrows. Be sure to select ‘Import Presets’.
Some CSS is also in the Advanced tab of some modules and rows.
The dropdown icon is using the ET icon font and can be changed.
I’m using Divi’s default font Open Sans on my demo site. When you import the the layout it will use your assigned fonts so some font sizes will probably need to be adjusted (since all font families have different widths for the same letter).
If using WooCommerce I came across a z-index issue on single product pages on mobile when using the theme builder header. I’ve added some code at the end of the CSS to fix it but check if you need it before adding.
CSS Code
[css]
/*** EVENT/ANNOUNCEMENT CUSTOM HEADER ***/
.et-db #et-boc .et_mobile_menu li a:hover, .et-db #et-boc .et-menu a:hover, .et-db #et-boc .nav ul li a:hover {
opacity: 1 !important; /* removes opacity of link on hover */
background-color: transparent !important; /* dropdowns and mobile menu on hover */
}
/*** TOP / SECONDARY MENU ***/
#custom-header .et_pb_main_blurb_image {
width: 22px !important;
margin-bottom: 0 !important;
}
#custom-header .et_pb_blurb_container {
padding-left: 0 !important;
}
/*** MIDDLE / PRIMARY MENU ***/
#custom-header .et_pb_menu__wrap {
justify-content: flex-end !important;
}
#custom-header .et_pb_menu__menu {
margin-right: 2em;
}
@media only screen and (min-width: 981px) {
#custom-header .menu-item-has-children>a::after {
content: '\43' !important; /* change dropdown icon */
}
}
/*** BOTTOM / THIRD MENU ***/
#custom-header .custom-third-nav:after {
content: none;
}
#custom-header .custom-third-nav .et_pb_countdown_timer .et_pb_countdown_timer_container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
#custom-header .custom-third-nav .et_pb_countdown_timer .section.values {
display: inline-flex !important;
align-items: center;
width: 15% !important;
}
#custom-header .custom-third-nav .et_pb_countdown_timer div.days.section.values p.label:after {
content: 's'; /* add an s at the end of day */
}
#custom-header .custom-third-nav .et_pb_countdown_timer .section p.value {
text-align: right !important;
margin-right: 5px !important;
}
#custom-header .custom-third-nav .et_pb_countdown_timer .sep {
display: none !important;
}
/*** TABLET / SMALL SCREENS ***/
@media only screen and (min-width: 981px) and (max-width: 1280px) {
#custom-header .custom-secondary:after {
content: none !important;
}
#custom-header .custom-secondary {
justify-content: space-between;
column-gap: 3%;
}
#custom-header .custom-secondary .et_pb_column {
margin: 0;
flex: 1;
}
#custom-header .custom-secondary .et_pb_column_empty {
display: none;
}
}
/*** MOBILE MENU ***/
.et_mobile_menu {
border: 0; /* removes top border line */
margin-top: 10px; /* this may need adjusting */
z-index: 99;
}
.et_mobile_menu li a {
border-bottom: 0 !important;
}
.et_mobile_menu .menu-item-has-children>a {
background-color: transparent !important;
}
@media only screen and (max-width: 767px) {
.custom-primary .et_pb_menu_inner_container {
padding-left: 3%;
padding-right: 3%;
}
}
/*** SEE NOTE ABOVE BEFORE ADDING THIS ***/
@media only screen and (max-width: 980px) {
#main-content {
z-index: 1;
position: relative;
}
}
[/css]
0 Comments