Pointfinder will cause residual styling, so we’ll use Manual Integration to prevent the theme from interfering
Manual Integration
Always make changes in a child theme to preserve the edits when you update your parent theme in the future
First, we’ll replace the theme’s menu system with UberMenu. Copy the theme’s header.php template into the child theme, then open the child theme header.php
Find the theme’s menu block:
<nav id="pf-primary-nav" class="pf-nav-dropdown clearfix">
<ul class="pf-nav-dropdown pfnavmenu pf-topnavmenu">
<?php pointfinder_navigation_menu ();?>
<?php if (PFPBSIssetControl('general_postitembutton_status','','1') == 1) {?>
<li id="pfpostitemlink" class="main-menu-item menu-item-even menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children">
<a class="menu-link main-menu-link">
<div class="postanitem-inner">
<span class="pfadmicon-glyph-478"></span><?php echo PFPBSIssetControl('general_postitembutton_buttontext','','Post an Item');?>
</div>
</a>
</li>
<?php };?>
</ul>
</nav>
and conditionally replace it with UberMenu:
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php if (PFPBSIssetControl('general_postitembutton_status','','1') == 1) {?>
<div id="pfpostitemlink" >
<a class="menu-link main-menu-link">
<div class="postanitem-inner">
<span class="pfadmicon-glyph-478"></span><?php echo PFPBSIssetControl('general_postitembutton_buttontext','','Post an Item');?>
</div>
</a>
</div>
<?php };?>
<?php ubermenu( 'main' , array( 'theme_location' => 'pointfinder-main-menu' ) ); ?>
<?php else: ?>
<nav id="pf-primary-nav" class="pf-nav-dropdown clearfix">
<ul class="pf-nav-dropdown pfnavmenu pf-topnavmenu">
<?php pointfinder_navigation_menu ();?>
<?php if (PFPBSIssetControl('general_postitembutton_status','','1') == 1) {?>
<li id="pfpostitemlink" class="main-menu-item menu-item-even menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children">
<a class="menu-link main-menu-link">
<div class="postanitem-inner">
<span class="pfadmicon-glyph-478"></span><?php echo PFPBSIssetControl('general_postitembutton_buttontext','','Post an Item');?>
</div>
</a>
</li>
<?php };?>
</ul>
</nav>
<?php endif; ?>
I’ve been informed that with the latest version of the theme, you can now add your “Add a Place” button directly via Appearance > Menus by adding a custom link to /dashboard/?ua=newitem. Doing this will simplify things so you can just use this code instead
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'pointfinder-main-menu' ) ); ?>
<?php else: ?>
<nav id="pf-primary-nav" class="pf-nav-dropdown clearfix">
<ul class="pf-nav-dropdown pfnavmenu pf-topnavmenu">
<?php pointfinder_navigation_menu ();?>
<?php if (PFPBSIssetControl('general_postitembutton_status','','1') == 1) {?>
<li id="pfpostitemlink" class="main-menu-item menu-item-even menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children">
<a class="menu-link main-menu-link">
<div class="postanitem-inner">
<span class="pfadmicon-glyph-478"></span><?php echo PFPBSIssetControl('general_postitembutton_buttontext','','Post an Item');?>
</div>
</a>
</li>
<?php };?>
</ul>
</nav>
<?php endif; ?>
Critical Filter Override
This theme will filter the menu output and strip out the menu wrapper. Therefore, it is critical that you go into the UberMenu Control Panel and enable the Force Filter UberMenu Settings setting to override the theme’s filter. Without this, you’ll just see an unstyled mess, because the theme removes part of the UberMenu structure.
Post Item Link
I have been informed that current versions of the theme now allow you to add a link to /dashboard/?ua=newitem. If this works for you, then you can add this item to your menu via Appearance > Menus, then remove the extra #pfpostitemlink markup from the manual integration and ignore this section
The theme hard-codes a post item link which is not a real menu item into the menu. This item doesn’t actually have a real link, it relies on this javascript to function:
$('#pfpostitemlink a').on('click', function(event) {
if (theme_scriptspf.userlog == 1) {
window.location = theme_scriptspf.dashurl;
}else{
$.pfOpenLogin('open','login','','',1);
};
});
As a result, it prevents us from just adding a proper menu item, and instead we have to keep the hardcoded element in our manual integration, as seen above. In addition, we’ll need to add this CSS in the CSS Tweaks to align the button properly
#pfpostitemlink{
float:right;
margin:13px 0 0 13px;
}
#pfpostitemlink a{
display:block;
background-color: #ad2424;
color:#fff;
}
UberMenu Settings
Skin
I recommend using the Vanilla Skin for this theme.
Menu Height
To change the menu height just on desktop, I recommend adding this CSS in the Desktop CSS Tweaks
.ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:52px;
padding-bottom:53px;
}
The exact padding may vary depending on the size of your logo.
Submenu Bounds
You will likely want to change your Bound Submenu To setting to “Unbounded” to allow the submenu to expand beyond the width of your menu bar.
If you need the submenu to expand beyond the width of the theme’s 9/12ths column menu wrapper, you can add this CSS:
#pfmenucol1{
position:static;
}
And to bound it to the content area, add this:
.wpf-navwrapper .pf-container{
position:relative;
}
Mobile Menu
To make the Post Item Button and menu play nice on mobile, add this CSS in your Mobile CSS Tweaks
div#pfpostitemlink{
float:none;
width:100%;
padding:0;
margin:0;
}
div#pfpostitemlink .menu-link{
padding:0;
margin:0 !important;
}
.ubermenu-responsive-toggle{
clear:both;
}
You can also now hide the unnecessary toggle like this:
#pf-primary-nav-button{
display:none !important;
}
Sticky Header
The theme offers a sticky header. The theme adds the class .pfshrink to the header when it becomes sticky, so if you would like to style UberMenu specifically in the sticky state, you can make use of this class. For example, to reduce the menu height:
.pfshrink .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:10px;
padding-bottom:10px;
}
(adjust padding values as desired)