Ocean WP

To manually integrate with Ocean WP and prevent it from interfering on mobile, we’ll need to override it’s header nav.php template

Remember: Always make code changes in a child theme to preserve them when you update. You can download the OceanWP sample child theme here. Upload, install, and activate it like a normal theme.

Main Menu

Overview

Ocean WP uses a 2-menu system (one for desktop, one for mobile). We’re going to replace the theme’s desktop menu with UberMenu and remove the mobile menu so that UberMenu controls both the desktop and mobile without interference. To do so, we’ll create a child theme, copy over and modify the nav.php template, and add some custom CSS to wrangle things on mobile.

1. Disable the theme search bar

First, disable the theme’s search via the theme setting in the Customizer: Header > Menu > Search Icon > Search Icon Style

2. Prepare the child theme

In the child theme, create folders to create the directory structure partials/header

Next, copy the parent theme’s partials/header/nav.php into the directory structure you just created in the child theme, so that you have oceanwp-child-theme/partials/header/nav.php

3. Replace the desktop menu

To maximize compatibility, we’re going to replace everything between the ‘ocean_before_nav’ action and the ‘ocean_after_nav’ action.

Important: Current versions of OceanWP have this action twice within the nav.php file. These instructions refer to the second instance. This also means that you should make sure you’re not using a custom nav template in Ocean’s settings. If you are, you can replace the first instance instead.

So find this line (line 127 as of March 4, 2019)

do_action( 'ocean_before_nav' );

and paste this on the line after it:


	if( function_exists( 'ubermenu' ) ):
		ubermenu( 'main' , $menu_args );
	else:

Then find this code around line 201:

<?php do_action( 'ocean_after_nav' ); ?>

and paste this code just before it:

<?php endif; ?>

This will replace the OceanWP menu with UberMenu.

If you wish to align the menu to the right of the logo, change the Menu Bar Alignment to Right and set your Bound Submenu To setting to Unbounded in the UberMenu Control Panel.

You can also use the Menu Bar Margin Top setting to adjust the position of the menu bar vertically to align it with your logo/site title.

4. Remove the theme mobile menu

To hide the theme’s mobile menu toggle, add this CSS to your CSS Tweaks:

#site-header #oceanwp-mobile-menu-icon,
#site-header .oceanwp-mobile-menu-icon{
    display:none;
}

To position the UberMenu Responsive Toggle, either change the alignment to the right in the Customizer and add some margin:

#site-header .ubermenu-responsive-toggle{
    margin-top:10px;
}

Or leave the toggle full width and add

#site-header .ubermenu-responsive-toggle{
    clear:both;
}

5. Sticky Mobile Header

If you have a sticky header on mobile, you won’t be able to scroll the menu. If you can’t disable this in the theme settings, add this CSS to do so in your Mobile CSS Tweaks:

#site-header-sticky-wrapper #site-header{
    position:relative;
    transform:none;
}
#main{
    clear:both;
}

UberMenu 3