Docs

[MyThemeCoUsernm]

Hi,

How do you use the buttons that are found throughout my website (Customiser / Buttons) in my navbar where my main website page links are. Currently the page/nav links are just text with underlines when you hover over them, but I want them to be like the big green buttons that are used on the rest of my website which are set in customiser/buttons. I don’t need the marketing circles around the buttons, those can be left turned off.

Thanks in advance!

[Paul R]

Hi,

Thanks for writing in!

To achieve that, kindly do the following.

1. Add this in Appearance > Customize > Custom > Edit Global Javascript

jQuery(function($) {
   $('.x-button > a > span').addClass('x-btn');
});

2. Add this in Appearance > Customize > Custom > Edit Global CSS

.x-button > a > span {
  margin-top:-20px;
}

You may change 20px to adjust your button alignment

3. Add class x-button to your menu item

eg. http://screencast.com/t/h2Dn3JYoO

Hope that helps.

[MyThemeCoUsernm]

That worked great! Thank you. One more question… The buttons are appearing now behind my nav links but they are hugging the text really tight. For instance, one of my nav links is called ‘Home’ and the button appears behind it but is snapped up right tight around all the letters in ‘Home’. Is there a way to make that button larger like the other ones are on the site so the text is centered nicely in it with some space around the text?

[MyThemeCoUsernm]

I should also mention I’ve tried going into customize/buttons and changing the button size from Mini/Small/Regular/Large etc.. and the button does change size except the nav links font seems to increase with it so it’s always touching the outer edges of the button.

[Rupok]

Hi there,

Could you provide the URL and a screenshot of what you are trying accomplish? This is to ensure that we can provide you with a tailored answer to your situation.

Cheers!

[MyThemeCoUsernm]

This reply has been marked as private.

[MyThemeCoUsernm]

This reply has been marked as private.

[Joao]

Hi There

Please add the following code to Appereance / Customizer / Custom / CSS

.x-navbar .desktop .x-nav > li > a > span {
  padding: 5px 5px 5px 5px;
}

You can play with the px values to adjust according to your taste.

Hope that helps,

Joao

[MyThemeCoUsernm]

That worked perfect, I adjusted my px slightly to 5px 15px 15px 5px. Thank you!

[Rahul]

You are welcome!

[Author]

Posts