Home>Support>Moving menu widget + social widget in header

Moving menu widget + social widget in header

By kaecreative, 9 years ago. Last reply by Daniel, 9 years ago.

Hi,

I’d like to change the following for my Vantage theme:

– align all the elements in my header so they all sit on the same baseline
– centre the custom menu widget in my header
– centre my social widget in responsive mode

Thanks,
Mandy

URL: http://gobble.theformmaker.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, 5 months ago Magus
    Hi, I Work Here

    Hi Kaecreative

    This can all be achieved with some custom CSS. Please navigate to Appearance->Custom CSS and enter the following.

    /* Align Header Elements */

.so-widget-sow-social-media-buttons-flat-c3e1d1dc39a2 .sow-social-media-button {
  padding: 0px !important 
}

/* Centre Menu and Social Media Widget */

#masthead .hgroup #header-sidebar {
    margin: 0 70%;
}

    I’ll get back to you with the social media on mobile in a while

    Let us know how you get on

    Magus

  2. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Kaecreative,

    Please amend the bottom of the two options to

    /* Centre Menu and Social Media Widget */

@media and screen (min-width: 680px) {
#masthead .hgroup #header-sidebar {
    margin: 0 70%;
}
}

    I noted that it was changing the layout of the social media icons on mobile view.

    Let us know how you get on

    Magus

  3. 9 years, 5 months ago kaecreative

    Hi Magus,

    Thanks for your quick response.

    This has helped align the menu a bit better, but I want it to sit directly in the middle of the screen on desktop. Right now it is to the right, see screenshot 1.

    On mobile the social icons are still on the left, see screenshot 2.

    Many thanks for your assistance.

  4. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Kaecreative,

    Please replace my last entry with the following

    /* Centre Menu and Social Media Widget */

#masthead .hgroup #header-sidebar {
    margin: 0 70%;
}

/* Adjust Media icons for mobile */
@media and screen (max-width: 680px) {
.so-widget-sow-social-media-buttons-flat-c3e1d1dc39a2 .social-media-button-container {
    text-align: center;
}
#masthead .hgroup #header-sidebar {
    margin: 0 auto;
}
}

    This should fix any remaining issues with the desktop and mobile layouts.

    Let us know how it goes

    Magus

  5. 9 years, 5 months ago kaecreative

    Hi,

    This didn't really work at all. Please see screenshot attached.

    Note: on the desktop, I only want the menu to sit in the center of the screen, not the social icons as well. I would like the social icons to stay on the right on the desktop. On mobile, I would like everything in the header to be centered: logo + menu + social icons in one line.

  6. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Keacreative

    Please remove this section

    /* Centre Menu and Social Media Widget */

@media and screen (min-width: 680px) {
#masthead .hgroup #header-sidebar {
    margin: 0 70%;
}
}

    and add this

    /* Center Media icons for mobile */
@media and screen (max-width: 680px) {
.so-widget-sow-social-media-buttons-flat-c3e1d1dc39a2 .social-media-button-container {
    text-align: center;
}
}

    This will take care of centring all items when viewing on the mobile. I will need to check and see what the best approach to spacing your custom menu and social media icons for desktop would be. The issue I have found is with spacing the widgets in the header sidebar widget. Please bear with us while we work up an acceptable solution.

    Thanks

    Magus

  7. 9 years, 5 months ago kaecreative

    Hi,

    I've updated the code but the social icons are still left aligned on mobile. Please see screenshot.

  8. 9 years, 5 months ago Daniel
    Hi, I Work Here

    Hi Kaecreative

    Try this out. If you navigate to Appearance > Custom CSS, add the following code.

    @media screen and (max-width: 680px) { 

.social-media-button-container   {
text-align:center !important;
}
}

    Cheers

  9. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Kaecreative

    @Addo thanks for jumping in with that.

    I have a working solution for the alignment in desktop view. Please try this in your Custom CSS

    header#masthead .hgroup #header-sidebar {
  width:55%;
}
header#masthead .hgroup #header-sidebar aside.widget {
    width: 50%;
}

.social-media-button-container {
  text-align: right;
}

    You may need to tweak the percentage in the header-sidebar entry at the top to give you the desired positioning.
    Inrease this to move the menu left and decrease for right.

    Let us know how it works out

    Magus

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

    Hi Kaecreative

    Would you mind confirming if the suggested solutions works for you?

    Looking forward to hear from you

  11. 9 years, 5 months ago kaecreative

    Hi,

    Thanks for all your help, the menu in the middle just doesn't seem to look quite right no matter how much I tweak it. I think it is best for it to sit next to the social buttons as it is the most simple solution.

    How do I add a bit more padding to the top or bottom of the menu icon in mobile view?

  12. 9 years, 5 months ago Daniel
    Hi, I Work Here

    Hi Kaecreative

    Try following code.

    
ul#mobile-nav-item-wrap-1 {    
    padding-top:10px !important;
    padding-bottom:10px !important;
}

    You can adjust the figures in px to meet your requirements

    Cheers

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