Hello,
I have a button in my header that I’ve put in using a widget. On Firefox and Chrome, the button looks fine:
But on Safari, the button looks like this:
Is there some way of fixing this without me messing up the spacing on the other browsers?
Thanks in advance.
Hi mxshi!
Can you please show us your web site URL?
Best regards,
Basilis
Sure, it’s below. Let me know if you need login details as well, thanks.
Hey!
Please try the following CSS instead:
#header .widget {
left: 68%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(0%);
}
Best regards,
Rikard
Thanks, that seems to have fixed it. However, I’d also like to ask whether it’s possible to have the widget button scale with the header menu links? Right now, when you make the browser window very small, the widget button and the menu links will overlap. Is there a way to avoid this?
Hi!
You can actually simply go to Appearance > Menus and add your button as a new link and have it act as one of the menu items.
Best regards,
Yigit
Ah, that’s a lot easier. Thanks! Can you please tell me the default CSS for the menu button so I can change the border/text colors, etc?
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
#top .av-menu-button > a .avia-menu-text {
border: 2px solid;
border-radius: 2px;
border-color: orange;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field
Best regards,
Yigit
Great, that solved it. Thanks!