This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Center Header Widget with CSS

Resolved 9 replies premiumthemetheme-vantage
Carson Samuel Roes
10 years ago · Last reply by Andrew Misplon 10 years ago

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!

URL: http://www.eaglechristiantours.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 10 months ago

    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.

  2. Carson Samuel Roes 10 years, 10 months ago

    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.

  3. Carson Samuel Roes 10 years, 10 months ago

    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.

  4. Andrew Misplon Staff 10 years, 10 months ago

    Thanks for the feedback, let me re-look at it now. My idea was to use a single Layout Widget.

  5. Andrew Misplon Staff 10 years, 10 months ago

    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;
}
  6. Carson Samuel Roes 10 years, 10 months ago

    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.

  7. Andrew Misplon Staff 10 years, 10 months ago

    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

  8. Carson Samuel Roes 10 years, 10 months ago

    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;
}
  9. Andrew Misplon Staff 10 years, 10 months ago

    That’ll work. Thanks for sharing. Sorry it was a mission.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread