Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I have custom CSS for my header section for the “Making the Journey….” widget ( .journey ), but I want the social media icons and “Request a Quote” button ( .button ) to still be centered vertically.
When I moved the “Making the Journey…” widget over to the left it moved (for some reason) moved the other widgets down as well. I’m not sure where my mistake was. I didn’t use the #header-sidebar to adjust them.
Basically, I don’t want the “Making the Journey….” widget to move, I just want the Social Media Icons and the “Request a Quote” button to be centered vertically.
Thanks!
Hi Carson
Thanks for reaching out. Before we proceed further, can you perhaps try the Layout Builder widget in the header widget area. It is a mini Page Builder instance and might be the easiest solution to building the layout you want and adding widgets to it, in the header widget area.
I use the layout builder for the “Making the Journey…” widget and the “Request a Quote” widget, but mainly to apply css tags to the individual widgets.
So there is just one widget inside the layout builder widget (I know that kind of defeats the purpose of a layout builder) but it allows me to easily apply css tags to each item.
Thanks for the feedback, let me re-look at it now. My idea was to use a single Layout Widget.
If you just want to work on the button centering and nothing else you could try the following under Appearance > Custom CSS:
/* Vantage Header Sidebar Padding */ header#masthead .hgroup #header-sidebar[style] { padding-top: 20px !important; padding-bottom: 20px !important; }The button and social icons load to the correct spot and then drop down about 5-10 px. Do I need to define the height and width of the objects in css? I had to do that for a previous widget in the header and that fixed it, but I don’t know if there is something else I should do? Because I didn’t change any of the code affecting those objects so i’m not sure why they load correctly then move down all of a sudden.
Usually this rule stops that jump by overriding the inline style being added via JS to auto vertically center the header widget area. Sure, you could declaring a height for those widgets and see if it helps. Or perhaps declare a height for:
header#masthead .hgroup #header-sidebar
I just ended up putting this code in to move it back up
header#masthead .widget_vantage-social-media { position: relative !important; margin-top: -10px !important; } header#masthead .button { position: relative !important; margin-top: -10px !important; }That’ll work. Thanks for sharing. Sorry it was a mission.