[Resolved] Formatting Widget in Header

[lunatrix]

I would like to use the plugin Simple Social Icons widget in my site header. When I add it, I see no way to format its position. I want to have the social icons between my logo (left aligned), and my main nav (right aligned).

Also, the widget pushes the menu down from where I had it positioned.

[Tom]

Hi there,

This CSS might help:

.inside-header {
    display: flex;
    align-items: center;
}

.site-logo {
    order: 1;
}

.nav-float-right .header-widget {
    order: 2;
    margin-left: auto;
    top: auto;
    margin-right: auto;
}

#site-navigation {
    order: 3;
}

.nav-float-right .header-widget .widget {
    padding-bottom: 0;
}

Depending on your browser compatibility needs, you might want the run the above CSS through this tool: https://autoprefixer.github.io/

[lunatrix]

This is perfect! Thanks!

[lunatrix]

This solution looks great on the desktop, but I just discovered that it does strange things on mobile/tablet.

1) the hamburger menu and search icon are superimposed on top of each other
2) setting the menu drop point doesn’t have any effect which means that on tablets and mobile phones the menu is mashed into a skinny strip in the right-hand side of the screen when you expand it

[Leo]

Can you try wrapping Tom’s code in media query so it’s desktop only like this?

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }

    .site-logo {
        order: 1;
    }

    .nav-float-right .header-widget {
        order: 2;
        margin-left: auto;
        top: auto;
        margin-right: auto;
    }

    #site-navigation {
        order: 3;
    }

    .nav-float-right .header-widget .widget {
        padding-bottom: 0;
    }
}

[lunatrix]

Excellent! I was actually just about to do that when you replied 🙂

[Leo]

Awesome 🙂

[Author]

Posts