Docs

[Mattatoni]

I successfully was able to add a button as the last item in my menu, thanks to info in another post … by making a “Custom Link” button in the menu and putting this in the “Navigation Label”: <button class=”x-btn x-btn-small” type=”button”>My Demo</button>

My questions are:
1) how would I make it so this button then appears to the left of the hamburger when it switches to mobile? … as seen in attachment. (I will then have to make it dissappear on mobile drop down, but I think I can figure that one out)

2) How to remove the ‘underline on hover’ effect on the button (when it’s in normal desktop mode)

Thanks so much!

[Rad]

Hi there,

Thanks for writing in.

1. Maybe it’s possible with the combination of CSS and javascript (wrap, append). Would you mind providing your site’s URL that has this button? I need to see the menu item’s ID that as the button for jQuery selection.

2. Same as #1, need to know the ID of the menu item that has the button 🙂

Thanks!

[Mattatoni]

This reply has been marked as private.

[Jade]

Hi there,

#1 Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then go to wp-content/themes/x/framework/views/global/ then copy the file _nav-primary.php then copy it to wp-content/themes/x-child/framework/views/global/ then replace the code in the file to:

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

<a class="mobilebtn" href="#">
   <button class="x-btn x-btn-small" type="button">Schedule a Demo</button>
</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 replace the # to the link here:

<a class="mobilebtn" href="#">
   <button class="x-btn x-btn-small" type="button">Schedule a Demo</button>
</a>

Then add this code in the custom CSS:

@media (max-width: 979px) {
    .mobilebtn {
         display: block;
    }
}

.mobilebtn {
    float: right;
    margin-top: 15px;
    display: none;
}

#2 You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav > li#menu-item-122 > a:hover > span {
    box-shadow: none;
}

Hope this helps.

[Author]

Posts