Docs

[neilandroid]

My client has requested a nav that works as such: hamburger-only navigation (floated left) mailto button (center) and social icons (floated right).
I’ve managed to work out how to do some of their request using a child theme and CSS, but still have a couple of issues:
1 – How do I add a simple mailto button in the center (of the collapsed navbar)
2 – How do I stop the social icons moving down when the menu is opened?

[neilandroid]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

1. Not really sure on what you want to achieve or where do you want to put the button. In case you want to add a button in the menu navbar, you could follow the link below

https://community.theme.co/forums/topic/add-button-to-navbar-menu/

2. Instead of adding the custom social after the navbar, add it before before the navbar. Check attached for more details.

Let us know how it goes.

Thanks.

[neilandroid]

1. I want to add a mailto button to the navbar – Pics attached of what I’m trying to achieve. The link you provided shows how to make a menu item into a button. I want a button that is visible in the navbar independently of the menu (i.e. whether the menu is collapsed or open)

2. I added the custom social icons in the navbar by amending the _navbar.php in the child theme and styled them using custom CSS. Please can you clarify where exactly I need to amend to add the custom social before the navbar.

[Nico]

Hi There,

The instructions below will need to edit your _nav-primary.php child theme.

1. First, create a div same as your custom social icon however with an another class then inside the div is your mailto html. Then add the code after your custom social icon code.

<div class="custommailto"><a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">book a table</a></div>

After that add this in your custom CSS:

.custom-mailto{
    margin-top: 13px;
    width: 42%;
    float: right;
    display: block;
}

Adjust the width to make it center.

2. Instead of adding your custom social code in your _navbar.php in the child theme, add your custom social icon in your _nav-primary.php. Add it after the code below or before your custom-mailto class:

<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>

Final code of your _nav-primary.php would be:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
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>

<div class="custom-social"><div class="x-social-global"><a href="https://www.facebook.com/FlorentineLDN/" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://twitter.com/FlorentineLDN" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://www.instagram.com/florentinelondon/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a></div></div>
<div class="custommailto"><a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">book a table</a></div>

<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; ?>

Let us know how it goes.

Hope it helps.

Thanks.

[neilandroid]

Amazing. Thank you very much!

[Rahul]

You’re most welcome!

Let us know if we can help with anything else.

Thanks for choosing the X-theme.

[Author]

Posts