Action Button with Split Menu

Prohibitus · April 2020

Hello!

I'm trying to add the Action Button (from Header& Subheader > Extra) but it doesn't appear in the header (Split Menu style). To do it I just inserted Title and Link in the Action Button section.

Am I doing something wrong?

Thank you

Pablo · April 2020

Hello,

Action Button is not working in the Split Menu, this header was not created to use that feature.

Thanks

Prohibitus · April 2020

Thanks. How can I achieve something similar using the Split Menu?

Pablo · April 2020

You would have to create a CSS code which will catch the last element of the menu and style it to make it look like the button.

Thanks

Prohibitus · April 2020

I tried to set action_button as the class of the last element of the menu, but it doesn't work.

Pablo · April 2020

It's different code than creating a button, please send me a link to your website.

Thanks

Prohibitus · April 2020

I can't because I'm working on it locally. Anyway what I did is the following:

<li id="menu-item-91" class="action_button menu-item menu-item-type-post_type menu-item-object-page last"><a href="http://localhost/about/"><span>ABOUT</span></a></li>

Pablo · April 2020

I'm not sure if that class is not reserved, but okay.

You have to create a CSS code which will make your item 'button' like, are you able to do that?

We suggest to take a look at these documentations:

https://www.w3schools.com/cssref/pr_background-color.asp

https://www.w3schools.com/cssref/pr_border.asp

https://www.w3schools.com/cssref/pr_text_color.asp

https://www.w3schools.com/cssref/pr_padding.asp

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Thanks

Prohibitus · April 2020

Thanks for your answer. Yes, in fact I was able to create a normal button, but I would like to have it in the same style of the theme (I'm using Resort 2 as template). I'm currently looking in the source code of BeTheme.

Pablo · April 2020

Our theme css code is really minified and a lot of classess depends on the look of that button.

We suggest, to try to recreate this button, because searching for the css attributes could be hard.

thanks

Prohibitus · April 2020

Yes I noticed, I'll try to recreate it, thanks.

Anyway before, with my previous code I tried to add the already existent class action_button, but it doesn't work.

Pablo · April 2020

I do not quite understand, you can add additional class to the menu item in Appearance > Menus

https://prnt.sc/s7eamt

Thanks

Prohibitus · April 2020

Yes, sorry, it wasn't a question, just a ascertainment

I was simply saying that I tried to add action_button (the existent class from BeTheme, not mine), in the class field that you just linked me, but it doesn't work.

Pablo · April 2020

It will not work like that, as I said, you have to create your own CSS styling because adding class action button will not be solution - the action button is a whole html structure which is very different than a menu item.

If you want to use the action button without this kind of modifications, you have to switch the header to other.

Thanks

Prohibitus · May 2020

At the end I decided to just set a different color instead of use a button. Like the BUY NOW link in the menu of the Resort 2 template. I thought that something like this were enough:

.my-button {

color: red;

}

but it doesn't work. Any idea?

Pablo · May 2020

Try to use the !imprortant CSS rule before the ";" sign of color: example:

color:red !important;

Also, check in the HTML structure if you correctly catch the link.

If your website would be live, I could help you with that CSS code.

thanks

Action Button with Split Menu

Comments