Brixton creates significant residual styling, breaking UberMenu. We’ll use Manual Integration to prevent the theme from interfering.
Since Brixton uses 3 separate menus (main, sticky, responsive), our strategy will be to (1) manually integrate the main menu, (2) prevent residual styling on the sticky menu, and (3) remove the mobile menu (UberMenu’s responsive menu will show instead).
All changes should be made in a child theme in order to preserve them during future theme updates
Please note that this theme includes 3 calls to wp_nav_menu() in the header.php, one for the main menu, one for the responsive menu, and one for the sticky menu. Make sure you’re editing the proper call in each section below
Integrating the main menu
The main menu is visible by default when you first load the page on a desktop machine. In the header.php, find this code inside the #header div:
<div class="pagenav">
<?php
if ( has_nav_menu( 'pmcmainmenu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-header home',
'menu_id' => 'menu-main-menu-container',
'theme_location' => 'pmcmainmenu',
'echo' => true,
'fallback_cb' => 'opus_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new pmc_Walker_Main_Menu()));
} ?>
<div class="social_icons">
<div><?php pmc_socialLink() ?></div>
</div>
</div>
We will conditionally replace this when UberMenu is present via the UberMenu manual integration code. Here’s the result:
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'pmcmainmenu' ) ); ?>
<?php else: ?>
<!-- main menu -->
<div class="pagenav">
<?php
if ( has_nav_menu( 'pmcmainmenu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-header home',
'menu_id' => 'menu-main-menu-container',
'theme_location' => 'pmcmainmenu',
'echo' => true,
'fallback_cb' => 'opus_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new pmc_Walker_Main_Menu()));
} ?>
<div class="social_icons">
<div><?php pmc_socialLink() ?></div>
</div>
</div>
<?php endif; ?>
This prevents the theme’s CSS from breaking the menu.
By default, the theme sets the header to an explicit height of 60px. You will likely want to add this CSS in your CSS Tweaks to make the header size naturally to the menu:
#headerwrap{
height:auto;
}
Please note that the Social Media Icons from the theme will also be removed, however, you can add your own through UberMenu: Social Media Icons
Eliminating residual styling from the Sticky Menu
The sticky menu in the Brixton theme is an entirely separate menu. It also suffers from residual styling from the theme, so if you want to use UberMenu on the sticky menu, you need to manually integrate it as well.
In the header.php, you’ll find this code just inside the body tag:
<div class="pagenav fixedmenu">
<div class="holder-fixedmenu">
<div class="logo-fixedmenu">
<?php
if(isset($pmc_data['scroll_logo'])){
$logo = esc_url($pmc_data['scroll_logo']);
} else {
$logo = esc_url($pmc_data['logo']);
} ?>
<a href="<?php echo home_url(); ?>"><img src="<?php if ($logo != '') {?><?php echo $logo; ?><?php } else {?><?php get_template_directory_uri(); ?>/images/logo.png<?php }?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description') ?>" ></a>
</div>
<div class="menu-fixedmenu home">
<?php
if ( has_nav_menu( 'pmcscrollmenu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-scroll',
'theme_location' => 'pmcscrollmenu',
'echo' => true,
'fallback_cb' => 'opus_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new pmc_Walker_Main_Menu())
);
}
?>
</div>
</div>
</div>
The issue is the pagenav class, which is the source of the residual styling unfortunately.
The simplest solution is to change the first line above to look like this:
<div class="<?php if( function_exists( 'ubermenu' ) ) echo 'ubermenu-fixedmenu'; else echo 'pagenav'; ?> fixedmenu">
The result is that when UberMenu is enabled, the “pagenav” class won’t be printed, preventing the theme’s CSS from interfering.
To keep the menu centered properly, you will want to add this CSS in your CSS Tweaks:
.ubermenu-fixedmenu{
max-width:1220px;
}
Note that by default, both the Sticky and Main UberMenus will have the same styles. If you would like to style them independently, you can create a Secondary Configuration. Then activate the “Scroll Menu” theme location only on the secondary configuration, but not in the Main UberMenu Configuration.
In the example above, we’ve created a secondary configuration called “sticky_menu”, specifically to manage the Scroll Menu.
Removing the responsive menu
You don’t need a separate responsive menu with UberMenu, so we’ll just remove it from the theme. In the theme’s header.php, find this code inside the #header div:
<!-- respoonsive menu main-->
<!-- respoonsive menu no scrool bar -->
<div class="respMenu noscroll">
<div class="resp_menu_button"><i class="fa fa-list-ul fa-2x"></i></div>
<?php
if ( has_nav_menu( 'pmcrespmenu' ) ) {
$menuParameters = array(
'theme_location' => 'pmcrespmenu',
'walker' => new pmc_Walker_Responsive_Menu(),
'echo' => false,
'container_class' => 'menu-main-menu-container',
'items_wrap' => '<div class="event-type-selector-dropdown">%3$s</div>',
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>,<br>,<div>,<i>,<strong>' );
}
?>
</div>
We don’t need this at all, so when UberMenu is present, we just won’t print it, like this:
<?php if( !function_exists( 'ubermenu' ) ): ?>
<!-- respoonsive menu main-->
<!-- respoonsive menu no scrool bar -->
<div class="respMenu noscroll">
<div class="resp_menu_button"><i class="fa fa-list-ul fa-2x"></i></div>
<?php
if ( has_nav_menu( 'pmcrespmenu' ) ) {
$menuParameters = array(
'theme_location' => 'pmcrespmenu',
'walker' => new pmc_Walker_Responsive_Menu(),
'echo' => false,
'container_class' => 'menu-main-menu-container',
'items_wrap' => '<div class="event-type-selector-dropdown">%3$s</div>',
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>,<br>,<div>,<i>,<strong>' );
}
?>
</div>
<?php endif; ?>
The result is now that you’ll have the same desktop menu (but responsively displayed in mobile form) on your mobile site.
We’ll also display:none the sticky header (just like the theme does) on the responsive site in your Mobile CSS Tweaks:
.ubermenu-fixedmenu{
display:none !important;
}
That should do it!
Putting it all together
PHP Changes
For your reference, the final header.php will look like this, with the main menu conditionally replaced, the sticky menu’s class conditionally removed, and the responsive menu conditionally removed. However, it is better to make the changes manually on the latest file, rather than just copy and paste this header, as the header.php may change over time.
Custom CSS
The following custom CSS should be in your Custom CSS Tweaks:
#headerwrap{
height:auto;
}
.ubermenu-fixedmenu{
max-width:1220px;
}
And the following CSS should be in your Custom CSS Tweaks – Mobile
.ubermenu-fixedmenu{
display:none !important;
}