Docs

[Matt G]

We help out another ‘X’ site owner by doing some work on their site. They recently asked us to put a ‘Contact Us’ link in above their main menu. After looking through the forums I couldn’t see any way to achieve this and ended up inserting it into the topbar as a temporary measure. I did however want to run it by the forums here as I’ve seen some folk manipulate the header area in creative ways to get things done. Unfortunately this level of creativity isn’t part of my arsenal.

Is there any way to move the ‘Contact Us’ in the image down so it sits above the menu?

Site: http://fosteringkids.org.nz/

[Paul R]

Hi Matt,

To achieve that, create file _nav-primary.php in wp-content/themes/x-child/framework/views/global
and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<div class="header-right"><a href="http://fosteringkids.org.nz/contact-us">Contact Us</a></div>

<?php
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 
<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

<?php endif; ?>

Then add this in Custom > Edit Global CSS in the Customizer.

.header-right {
    float:right;
}

Hope that helps

[Matt G]

Thank you for your reply.

I’ve implemented the code on a test site and it does bring the menu into the header, however it has the side effect of bumping the menu to the left and leaving a gap (see attached image).

Unfortunately the website’s main menu doesn’t doesn’t have any wriggle room for this increase in the width. Is there any way of floating the two menus on top of each other? (Sorry if this is plainly not possible. I am a self-confessed coding dunce.)

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-topbar {
    margin-top: -33px;
}

body .x-topbar .alignright a {
    top: 68px;
    position:relative;
    color: rgba(255,255,255,0.5) !important;
    background: #274f6d;
    padding:10px 20px;
}

body .x-topbar .alignright a:hover {
    color: rgba(255,255,255,1) !important;
}

Hope this helps – thanks!

[Author]

Posts