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.

Replies

17
  1. Andrew Misplon Staff 11 years, 3 months ago

    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. Pim Mulders 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    For sure.

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

  4. Pim Mulders 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Pim Mulders 11 years, 3 months ago

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

  7. Andrew Misplon Staff 11 years, 3 months ago

    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. Pim Mulders 11 years, 3 months ago

    Fixed!

    Thank you very much Andrew

  9. Andrew Misplon Staff 11 years, 3 months ago

    For sure, glad that helped.

  10. Pim Mulders 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Pim Mulders 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Pim Mulders 11 years, 3 months ago

    Thank you Andrew!

  17. Andrew Misplon Staff 11 years, 3 months ago

    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.

Have a different question or issue?

Start New Thread