Docs

[mthomas91]

Hi,

Sorry, how do I add a class to the menu items?

Thanks,
Miles

[Jade]

Hi Miles,

Please see screenshot for guide.

Hope this helps.

[nphough]

Hello – I just came across this as I was looking for the same info about creating a top bar menu. This works well and thank you for continuing to update it!

My question is: if I create nested menu sub-items in top-menu they are displaying all the time instead of just on mouse over. Is there a way to make these items drop down on mouseover like in the regular menu? Thank you!

[Friech]

Hi There,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[pbeauchemin]

Hi There,

I implemented the code on the first page of this thread and created a page called “_topbar.php”.

Can you please tell me how I get the nav in the topbar to be right justified with the main nav?

Thanks

[Lely]

Hi There,

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.

[CodetrixNZ]

Hi Team,
I’ve read through this thread and it’s been exactly what I was after thank you, great detailed replies!
In my new Topbar Menu I’d like to have a Login/Logout link that dynamically changes depending if the user is logged into their account or not.
Is that possible?
Cheers

[Rue Nel]

Hey @CodetrixNZ,

Thanks for updating this thread!

In my new Topbar Menu I’d like to have a Login/Logout link that dynamically changes depending if the user is logged into their account or not.
Is that possible?

Yes it is possible. And since what you are trying to accomplish requires a template customization, we would like to suggest that you use 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.

Once you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Add Login/Logout link shortcode
// =============================================================================
add_shortcode( 'wp_loginout', 'wp_loginout' );

// Allow shortcodes in the topbar content
// =============================================================================
function allow_custom_shortcodes($contents) {
  $contents = do_shortcode($contents);
  return $contents;
}
add_filter('x_option_x_topbar_content', 'allow_custom_shortcodes');
// =============================================================================

And then, please go to your customizer, Appearance > Customize > Header > Miscellaneous and turn ON the topbar content. You can then insert this shortcode: [wp_loginout]

I would loved to know if this has work for you. Thank you.

[CodetrixNZ]

Bingo! That was exactly what I was after thank you very much!

[Zeshan]

You’re most welcome! 🙂

[hipneck]

Thanks to the code in this thread, I was able to add a WooCommerce Topbar Menu to Integrity. Yay, me! 🙂

I created the WooCommerce account & dynamic login/logout links using WooCommerce Menu Extension (available at WordPress.org). I think WooCommerce has basic page links you can add to your menu but I’m not sure that they’re dynamic based on login status (haven’t checked).

Thanks guys for all your support!

[John Ezra]

You’re most welcome! 🙂

[michaellanfield]

This reply has been marked as private.

[Friech]

Hi There,

You can write the menu in HTML and paste it on the Topbar Content.

<ul class="custom-menu">
	<li><a href="#">menu1</a></li>
	<li><a href="#">menu2</a></li>
	<li><a href="#">menu3</a></li>
	<li><a href="#">menu4</a></li>
	<li><a href="#">menu5</a></li>
</ul>

And then a custom css to float it on the right.

ul.custom-menu {float: right;}
ul.custom-menu li {
    display: inline-block;
    padding: 0 8px;
}

Hope it helps, Cheers!

[michaellanfield]

Thank you it worked, but is there a way to create a menu with sub menu?

[Author]

Posts