Novavideo causes residual styling, so we’ll need to use Manual Integration to replace the theme’s menu.
Manual Integration
Create a child theme and then copy the header.php
into the child theme. Find this code in the header.php
.
<!-- Menu navigation --> <?php if ( has_nav_menu('top-navigation') ) : ?> <div id="nav" class="border-radius-5 box-shadow"> <?php $nav_menu = array( 'theme_location' => 'top-navigation' ); wp_nav_menu( $nav_menu ); ?> <?php wp_nav_menu(array( 'menu' => 'top-navigation', 'theme_location' => 'top-navigation', 'walker' => new Walker_Nav_Menu_Dropdown(), 'items_wrap' => '<select class="selectnav"><option value="/">' . __('Select Page', novavideo_get_theme_name()) . '</option>%3$s</select>', 'container' => false, 'menu_class' => 'selectnav' ) ); ?> </div><!-- #nav --> <?php endif;?>
Replace this conditionally with the UberMenu manual integration code like so:
<?php if( function_exists( 'ubermenu' ) ): ?> <?php ubermenu( 'main' , array( 'theme_location' => 'top-navigation' ) ); ?> <?php else: ?> <!-- Menu navigation --> <?php if ( has_nav_menu('top-navigation') ) : ?> <div id="nav" class="border-radius-5 box-shadow"> <?php $nav_menu = array( 'theme_location' => 'top-navigation' ); wp_nav_menu( $nav_menu ); ?> <?php wp_nav_menu(array( 'menu' => 'top-navigation', 'theme_location' => 'top-navigation', 'walker' => new Walker_Nav_Menu_Dropdown(), 'items_wrap' => '<select class="selectnav"><option value="/">' . __('Select Page', novavideo_get_theme_name()) . '</option>%3$s</select>', 'container' => false, 'menu_class' => 'selectnav' ) ); ?> </div><!-- #nav --> <?php endif;?> <?php endif; ?>
Centering & Position
In the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout, set the Menu Bar Width to 1100px and set the Menu Bar Alignment to Center
You may want to set the Menu Bar Margin Bottom setting to 20px or so as well to add a bit of space between the menu and content.
Layering / z-index
To avoid and layering issues, add this CSS in your CSS Tweaks
#center{ position:relative; z-index:10; }