Ronneby (DFDevelopment)

Ronneby causes residual styling as well as strips out the menu wrapper, so we’ll need to manually integrate and override the Ronneby filters to integrate the theme. The good thing is that the theme uses a well designed templating system, so overriding just the menu in the HTML is very easy.

Manual Integration

Remember to always copy templates into child themes to make changes, in order to preserve those changes when you update the parent theme in the future

The theme’s menu is located in ronneby/templates/header/block-main_menu.php, which you should copy to your child theme within the same folder structure ronneby-child/templates/header/block-main_menu.php.

In that template, we’ll replace all the code with UberMenu conditionally:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'primary_navigation' ) ); ?>
<?php else: ?>

	<?php 
	global $dfd_ronneby;
	$menu_class = '';
	if(isset($dfd_ronneby['enable_menu_titles_delimiter']) && strcmp($dfd_ronneby['enable_menu_titles_delimiter'], 'off') === 0) {
		$menu_class .= 'dfd-disable-menu-delimiters';
	}
	if(isset($dfd_ronneby['enable_menu_line_animated']) && strcmp($dfd_ronneby['enable_menu_line_animated'], 'off') === 0) {
		$menu_class .= ' dfd-disable-menu-line-animated';
	}
	if(isset($dfd_ronneby['menu_alignment']) && !empty($dfd_ronneby['menu_alignment'])) {
		$menu_class .= ' '.$dfd_ronneby['menu_alignment'];
	} else {
		$menu_class .= ' text-left';
	}
	?>
	<nav class="mega-menu clearfix <?php echo esc_attr($menu_class); ?>" id="main_mega_menu">
		<?php
			wp_nav_menu(array(
				'theme_location' => 'primary_navigation', 
				'menu_class' => 'nav-menu menu-primary-navigation menu-clonable-for-mobiles', 
				'fallback_cb' => 'top_menu_fallback'
			));
		?>
		<i class="carousel-nav prev dfd-icon-left_2"></i>
		<i class="carousel-nav next dfd-icon-right_2"></i>
	</nav>
	?>
<?php endif; ?>

UberMenu Settings

Overcoming theme filters

The theme is going to disable the .ubermenu menu wrapper, which will completely break the menu and create a mess. To overcome this, just enable the Force Filter UberMenu Settings setting in the UberMenu Control Panel > General Settings > Miscellaneous > Theme Integration/Interference.

Menu Bar Alignment

The menu bar is full width by default, which will force it to a new line. To place it beside the logo, set the Menu Bar Alignment to “Right”

Submenu Width

To allow the submenus to expand to the width of your site’s content area, set the Bound Submenu To setting to “Unbounded”

Mobile Menu

First, set your Responsive Breakpoint in the UberMenu Control Panel to 1100px, to match the theme’s responsive breakpoint. You may also wish to adjust the responsive toggle alignment.

The theme will hide UberMenu on mobile because it sets the element containing UberMenu to display:none

To force the theme to show the menu and hide the theme menu toggle, add this CSS to your Mobile CSS Tweaks

#header .header-col-fluid,
#header #main_mega_menu{
    display:block !important;
    padding:0 !important;
}
#header .dl-menuwrapper{
    display:none !important;
}

To move the toggle up beside the logo, you can add this (in the standard custom tweaks) and set the Responsive Toggle’s alignment to the right

@media screen and (max-width:800px){
  .ubermenu-responsive-toggle{
    margin-top:-60px;
  }
}

Depending on your header size, you may need to adjust the -60px value.

UberMenu 3