Hi,
I have read the article http://forum.wpbeaverbuilder.com/knowledge-base/buttons-in-navigation-menu/ but it hasn’t helped me.
I am trying to add a menu (not a header menu) on a page from within Page Builder. I want to be able to use buttons instead of text menu items.
Can you give me some ‘for dummies’ instructions on how to do this as I do not know anything about css, where I need to put it or anything… 
Thanks,
Craig
Hey Craig,
What kind of layout are you trying to achieve? If you want all the menu items to look like buttons, you can use a bunch of Button modules to create your menu instead. The menu items from our Menu module is being generated dynamically, you can’t use a Button module there if that’s what you’re asking.
Ben
Hi Ben,
Yes, I wanted to create a bunch of buttons and wanted to try and use the a menu instead of buttons.
The reason for this is that to use buttons I have to:
Create a row with the number of buttons I need.
Add the buttons individually, size them, color them, add icons and text to them, add the links and then have to play around with getting the buttons consistent in size, width et etc.
It takes a long time to achieve. All the buttons will do is link to a page, so I thought that creating an ad-hoc menu to do the same thing would be much simpler, quicker and more controlled.
Perhaps for a future BB enhancement a ‘button group’ might be a good idea whereby I can specify the number, attributes etc of the group in one place.
I did achieve what I set out to do using buttons but it was not a pleasant experience as I needed several attempts to get the buttons to be consistent.
Thanks for your prompt reply,
Craig
Hi Craig,
You can add custom classes to each of you menu items. To do this, go to your WordPress Admin Dashboard > Appearance > Menus.
Once there, in the top right hand corner you should see a menu called Screen Options. Click and then a menu panel will appear that will drop down from the top with a bunch of checkboxes. One of these checkboxes is CSS Classes
Check this and when you click the drop down arrow on your menu items, a new field should be available.
Enter your custom classes here and you can use them to add a button styling to each of your menu items.
If you’re using the BB Theme, you can use the Bootstrap buttons classes, instead of having to write your own custom CSS. For example, add the following to your menu items CSS Classes field:
btn btn-primary
Like so:
Which will give you something similar to this:
You will likely need to update your menu links color options via the Customizer.
If you’re not using the BB theme, if you provide a link to the site in question, I can take a look and see if I can provide you with some starter CSS. Which you can use to as a template for your other menu items.
Thanks,
Danny