Add Widgets to Primary Menu – Good for Multiple Logos – Divi Tuts

Ever wanted to add widgets to the Divi primary menu? Out of the gate, the primary menu doesn’t offer much in the way of customizations, hence our obsession with creating tutorial videos on this very subject.

This time, we have a business case to display a company’s certifications prominently on the page. But if we created one giant logo from all of the logos, we couldn’t link to each certification’s corresponding page.

Here’s what you do in a nutshell to add widgets to your Divi primary menu…

1. Ensure you have a Divi child theme
2. Open the theme customizer and make the primary menu full width. (I don’t show it in the video, but if you have a secondary menu, it looks best to make that full width as well.)
3. In the theme customizer, I recommend setting the primary menu height to around 50-60. If you have a call to action button (like the one shown in the video, set it to 30).
4. Copy the Divi header.php file and place it in your child theme’s root folder
5. Create the widget area in the child theme’s functions.php and header.php files (see code below)
6. Add the desired widgets to “Header Widget”
7. Add CSS to place the widgets to the left of the site logo
8. Tinker with the CSS media rules to make the logos look superb on all screen sizes
9. Celebrate

Add the below to your functions.php file:

function wpb_widgets_init() {

register_sidebar( array(

'name' => 'Header Widget',

'id' => 'header-widget',

'before_widget' => '<div class="hw-widget">',

'after_widget' => '</div>',

'before_title' => '<h2 class="hw-title">',

'after_title' => '</h2>',

) );

 

}

add_action( 'widgets_init', 'wpb_widgets_init' );

Add the below to your header.php file:
Tip…watch the video to see where to place the snippet

 <?php if ( is_active_sidebar( 'header-widget' ) ) : ?>
    
<div id="header-widget-area" class="hw-widget widget-area headlogo1" role="complementary">
	<?php dynamic_sidebar( 'header-widget' ); ?>
    </div>


<?php endif; ?>

Add and adjust the example CSS to the style.css and get your widget area into the right place:

.headlogo1{
	position:absolute;
	left:130px; 
	top:20px;
}
.hw-widget{
	float:left;
	margin-left:20px;
}

@media all and (max-width:980px){

.hw-widget{
	float:left;
	margin-left:3px;
	margin-top: 0px !important;
}
.headlogo1{
	top:20px;
}
}

@media all and (max-width:480px){
.headlogo1{
	position:absolute;
	top:60px;
	left:0px;
}
.hw-widget{
	float:left;
	margin-left:5px;
	margin-top: 0px!important;
}
.container {
width:95%
}
.et_header_style_left .mobile_menu_bar, .et_header_style_split .mobile_menu_bar {
    padding-bottom: 5px !important;
}
.et_pb_fullwidth_section {
    padding: 0;
    margin-top: 25px;
}
#main-header {
    -webkit-box-shadow: 0 0px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 0 rgba(0,0,0,.1);
    box-shadow: 0 0px 0 rgba(0,0,0,.1);
}
}


@media all and (max-width:335px){
.container {
width:98%
}
.hw-widget {
	margin-left:2px !important;
	margin-top: 0px!important;
}
}

@media all and (max-width:1160px){
.hw-widget{
	float:left;
	margin-left:3px;
	margin-top:10px;
	
}
}

For other great enhancements to the Divi navigation, check out this post: Primary Menu, Secondary Menu, Fixed Menu, Logo Changes