Action Button colors

Din · May 2020

Hello

I notice that the action button is only outlined and color is applied only when you over.

Is there any way that i can have a solid red background button with white text always? Not just on hover.

See link below to website. I am looking at the Book Now action button to always be red and have white text. Currently, it looks like it's just outlined in red.

https://myplanetsun.ca/

I tried to apply the code I found online but it does nothing.

#Top_bar a.button.action_button { background: #000 !important; color: #FFF !important; }
#Top_bar a.button.action_button::after { display: none !important; }

Pablo · May 2020

Hello,

Your button style is "Stroke", change it to other in Theme Options > Global > General

https://prnt.sc/slknu4

Thanks

Din · May 2020

That was simple. Can't believe i missed it. Thank you.

Din · May 2020

1. Am I able to add 2 action buttons to the header and mobile header? How can i add a second action button? Do i need CSS to achieve this? Can you assist with any CSS to achieve 2 action buttons?

2. Also, any way to align logo on mobile to the left without using Minimal? If i use minimal it's perfect but the action button does not appear with minimal header. If i turn off Minimal header, the logo centers and the action button appears. How can i keep logo to the left on mobile and still show action button(s)?

3. When i add an icon to the action button, sometimes it displays (on home page) other pages it doesn't. Any ideas why? <i class="fas fa-calendar-alt"></i>

Thanks in advance.

Bryan · May 2020

1. There can be only one action button in the header. You can use our header builder plugin to have more.

2. This is how it was created, we cannot change it. Again, try using the header builder.

3. It is because you are not using our icons, most likely you are using font awesome which could have some issues loading

thanks

Din · June 2020

I tried header builder but it doesnt work right as it eliminates so much functionality, side slide disappears etc. and buttons don't align as they go out of view and mobile menu disappears. Doesn't work properly.

1. When i go back to classic header, i may be able to work with 1 action button, but on laptops, it just pushes the menu to 2nd line. what CSS can i add or what area of the theme can i force mobile menu icon at a specific px dimension. I cannot have menu stacking on multiple lines. When i go to Theme Options-->Responsive-->Header and i max out the Mobile Breakpoint to 1240px it's still not enough. I can decrease it but it makes it worse. Any help to enforce breakpoint at a smaller size would really help.

Example site 1: https://myplanetsun.ca/

Example Site 2: https://staging1.cwtan.ca/

When it's on mobile size, it's fine, when it's on large desktop screen it's fine....but when it's on a laptop or smaller monitor, menu does not change to the 3 line responsive menu, it just moves all menu titles to second and sometimes third line. Need to fix that.

Bryan · June 2020

Hey,

there are just too many items in your header. THere is not much that can be done in this case. You can only re-arrange those items into submenus.

#Top_bar .menu > li > a span:not(.description) {
	padding: 0 6px !important;

}

You can try this css, to decarease the padding between the menu items, but I would still remove at least one menu item. Try removing "home", users know that you have to click the logo to go back.
thanks

Action Button colors

Comments