[AnnParticipant]

Hi there X-Theme!

I have a burger menu on my site and I was wondering if there’s a way to add a call to action button next to the burger menu?

Thank you thank you!

Ann

[AnnParticipant]

Oopps file too big.. here we go again

[AnnParticipant]

Ohhh ggeez..

[JoaoModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[AnnParticipant]

Oh my bad! I always seem to forget that 🙂

https://moveu.com/

[Nabeel AModerator]

Hi again,

You can add a CTA button shortcode in your Topbar but first you’ll need to enable the shortcodes in Topbar, to do this please follow this thread https://community.theme.co/forums/topic/button-shortcodes-in-top-bar/ then you can position it with custom CSS.

Add the button in the Topbar first so we can suggest you the CSS accordingly. Thanks!

[AnnParticipant]

So I can’t add a button to the navigation bar? I was hoping I didn’t have to use the top bar as I think it takes up too much space from the homepage. I’d like the button to be inline with the burger menu if possible?

Thanks 🙂

Ann

[JoaoModerator]

Hi Ann,

Yes you can.

You need to add the code below and adjut the menu item number of your navbar link, you can find out the ID by inspecting it with the right button of your mouse. If you need help we can help you.

The code below should be added to Appereance >Customizer > Custom >CSS

#menu-item-257 a {
    color: #fff;
    border-color: #ff7600;
    background-color: #ff7600;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding-top: 12px;
    height: 35px;
    margin-top: 22px;
}
#menu-item-257 a span {
    box-shadow: none;
}
#menu-item-257 a:hover {
    color: #fff;
    border-color: #3f96ce;
    background-color: #3f96ce;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5); 
  box-shadow: none;
}

Hope that helps

Joao

[AnnParticipant]

Thanks for the prompt reply Joao! I don’t think I quite understand though 🙁 sorry!

Do I add a button to the top bar first from the customizer?

[FriechModerator]

Hi There,

Lets put the button directly next to your mobile menu instead.

On you child theme navigate to this directory: \x-child\framework\views\global\, there create a file named _nav-primary.php and paste the code below on it.

<?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 class="x-btn x-btn-transparent x-btn-square x-btn-mini cta-btn" href="#example" title="Example">Click Here</a>
<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; ?>

Replace the #example with the URL on where do you want this button to be link. And replace the Click Here with the actual label of your button.

Finally add this on your custom CSS.

.cta-btn {
	margin: 12px 0 0 15px;
	display: block;
	float: right;
}

The color of your button will depend on what color you set on Customizer > Buttons.

Hope it helps, Cheers!

[AnnParticipant]

That is literally EXACTLY what I wanted! You guys rock! Thank you!! I so appreciate the support you offer 🙂

[Rue NelModerator]

You’re most welcome. That what we are here for!
If you need anything else we can help you with, don’t hesitate to open another thread.

[AnnParticipant]

Just one more tiny thing haha!

Can I make this button a solid color without having to change the style of all buttons on my site?

[FriechModerator]

Sure thing, please update the custom CSS code I’ve provided above to this:

.x-btn.cta-btn {
    margin: 12px 0 0 15px;
    display: block;
    float: right;
    background-color: black;
    color: white;
    border-color: red;
}

/*hover state color*/
.x-btn.cta-btn:hover {
    background-color: white;
    color: black;
    border-color: green;
}

Feel free to change those color values.

And one more thing, on the _nav-primary.php file look for this string title="Example", replace that Example word or leave it blank. You’ll see that word when you hover-over the button.

Hope it helps, Cheers!

[AnnParticipant]

Again, thanks so much!! 🙂

[Author]

Posts