Home>Support>Header socials

Header socials

By Pim Mulders, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

if you go to my website and look at my header you can see my socials and some pages(my accounts,cart,contact) right to it.

I want thats the pages chance to the top and the socials under it.

I hope you guys can help me.

Thanks

URL: http://test.fonmulders.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Pim

    It’s harder than you might think. Try the following under Appearance > Custom CSS:

    header#masthead .hgroup #header-sidebar aside#vantage-social-media-4 {
top: 0;
right: 0;
}

header#masthead .hgroup #header-sidebar aside#nav_menu-12 {
top: 50px;
right: 100px;
}

@media (max-width: 960px) {

header#masthead .hgroup #header-sidebar aside#vantage-social-media-4 {
top: 0;
right: 0;
}

header#masthead .hgroup #header-sidebar aside#nav_menu-12 {
top: 50px;
right: 100px;
}

}

    Adjust top and right as px values. The first is the social widget, the second the menu. Then those two selectors are stated again in a 960px and below media query as you’ll want to tweak that adjustment as the window gets smaller.

  2. 9 years, 10 months ago Pim Mulders

    Thank you Andrew I almost got it fixed.

    Can you take a look at my website?

    http://test.fonmulders.com/

    There is some padding above [my accounts, cart, contact], i don’t know where i can chance the padding?
    I want the pages on top and the social icon on the place where they are now.

  3. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

    The position properties can accept negative values. So you can set top to say -20px for the links.

  4. 9 years, 10 months ago Pim Mulders

    Thank you i almost got it.

    Now there’re a couple more pixels left on top and i can’t help it if i put the -factor up.
    I want it on top of the page without space behind top-pages

  5. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    You can try removing the header sidebar padding with the following inserted under Appearance > Custom CSS:

    /* Vantage Header Sidebar Padding */

header#masthead .hgroup #header-sidebar {
padding-top: 5px !important;
padding-bottom: 5px !important;
}

    Adjust 5px down to 0px.

  6. 9 years, 10 months ago Pim Mulders

    Hmm just tried this but it doesn’t help, even if i chance the px in different numbers, nothing changes

  7. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Try changing the above Custom CSS to the following:

    header#masthead .hgroup #header-sidebar {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 92px;
}
  8. 9 years, 10 months ago Pim Mulders

    Fixed!

    Thank you very much Andrew

  9. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure, glad that helped.

  10. 9 years, 10 months ago Pim Mulders

    Hi Andrew,

    Can you please take a look at my new website URL?

    http://Www.deinktspecialist.com

    A changed the URL and the header changed from position.
    What do I need to add to my CSS?

    Thanks

  11. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Check that these ID’s haven’t changed:

    header#masthead .hgroup #header-sidebar aside#vantage-social-media-4 {
top: 0;
right: 0;
}

header#masthead .hgroup #header-sidebar aside#nav_menu-12 {
top: 50px;
right: 100px;
}

    Those both look like they’ve changed.

  12. 9 years, 10 months ago Pim Mulders

    Even if I add top:0 right;0 nothing changes,

    if you look at my site you can see that the social icons are ok now but the menu is not. I can’t give them a position above the socials?

  13. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Did you have a chance to inspect the source?

    The ID’s changed. They are now:

    Menu: nav_menu-6
    Social: vantage-social-media-2

    Wherever you previously referenced the old ID’s you now need to reference the new ID’s.

    header#masthead .hgroup #header-sidebar aside#vantage-social-media-2 {
top: 0;
right: 0;
}

header#masthead .hgroup #header-sidebar aside#nav_menu-6 {
top: 50px;
right: 100px;
}

    The old ID’s are mentioned twice. You need to make changes to both. The setup does look like it’s changed. You’ll need to change the top and right values to match. They can be negative.

  14. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    If you’re unsure how to inspect the page source, here is our tutorial on that topic: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/.

  15. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Here is a rough re-work for you:

    header#masthead .hgroup #header-sidebar {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 92px;
}

header#masthead .hgroup #header-sidebar aside#vantage-social-media-2 {
top: 120px;
right: 0;
}

header#masthead .hgroup #header-sidebar aside#nav_menu-6 {
top: 50px;
right: -150px;
}

@media (max-width: 960px) {

header#masthead .hgroup #header-sidebar aside#vantage-social-media-2 {
top: 0;
right: 0;
}

header#masthead .hgroup #header-sidebar aside#nav_menu-6 {
top: 50px;
right: 100px;
}

}

    I haven’t re-worked the positioning within the 960px breakpoint. You’d need to take a look at that.

  16. 9 years, 10 months ago Pim Mulders

    Thank you Andrew!

  17. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure, let me know how you do.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More