Button styling does not look correct on live site - fine within editor

Support
#1

I have a button using the latest version of Pro and Wordpress that does now show the proper background, border radius or border on the live site. If you place a second copy of the button on the site, it works fine with the exact same settings. Both button look find within the editor.

On my inline navigation, I am using the following custom CSS for the menu primary particle style. Maybe that’s affecting the button?

background: rgb(184,156,60); background: -moz-linear-gradient(180deg, rgba(184,156,60,1) 0%, rgba(223,197,107,1) 100%, rgba(181,152,54,1) 100%); background: -webkit-linear-gradient(180deg, rgba(184,156,60,1) 0%, rgba(223,197,107,1) 100%, rgba(181,152,54,1) 100%); background: linear-gradient(180deg, rgba(184,156,60,1) 0%, rgba(223,197,107,1) 100%, rgba(181,152,54,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b89c3c",endColorstr="#b59836",GradientType=1);

#2

Hey @nolannp11,

I switched the page to use the Blank No Container | No Header Footer and the button was fixed. This means that the cause is coming from the header.

Would you mind temporarily removing custom CSS and HTML in the Header to check which one is causing the issue.

Thanks.

#3

I made a copy of the header called “Amicus Header v2” and made it global. I removed the inline navigation custom css for the primary particle style. I also removed the custom css classes I used for the bar backgrounds. As far as I can tell there is no other custom css or html in the header. I even removed all the custom css from the customized even though I’m not calling those classes.

The button is still behaving the same way.

I did switch the template to no container, no header, footer and see that the buttons work. I’m at a loss as to why the header is causing an issue. Please help!

#4

Hey @nolannp11,

I found the cause. It’s an unfinished Element CSS in the Container of your First Bar. Removing that fixed the buttons.

Syntax errors in CSS could cause issues in the generated CSS across the builders.

Hope that helps.

#5

Hi Christian,
Thank you very much for finding the error. I think I started to add to css in there and then decided to delete it and make a class. I won’t make that mistake again :slight_smile:

#6

Glad we’re able to help, @nolannp11. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.