how to display social/email icons on top right of every page

[Sam]

Please help us add social/email icon links on top right of every page in GeneratePress theme.

Please see as they appear on the mentioned URL.

[Leo]

Hi there,

You can use the header widget area:
https://docs.generatepress.com/article/header-widget/

With lightweight social icons plugin:
https://en-ca.wordpress.org/plugins/lightweight-social-icons/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Hi there,

I followed your instructions and added the social icons plugin and the mobile css code from https://docs.generatepress.com/article/header-widget/

However, I am facing 2 issues on mobile where:

1. there is no vertical gap between logo and the social icons. In other words, they are too close to each other on mobile.
2. There is too much gap between the social icons and the navigation menu button.

Please help resolve.

Thanks.

[Leo]

1. Edit this existing CSS:

.header-widget {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    margin-left: auto;
    margin-right: auto;
}

to this:

.header-widget {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

2. Add this:

@media (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
        margin-bottom: 0;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Thank you – very close.

There is still too much vertical gap between the social icons and the navigation menu button.

Can we use a negative value for:

margin-bottom: 0;

[Sam]

Btw, I tried both – adding and removing – the below css and it doesn’t do anything:

@media (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
        margin-bottom: 0;
    }
}

[Sam]

Ok, I was able to fix it by specifying:

margin-bottom: -20px;

[Sam]

All good.

[Leo]

Instead of the negative margin, maybe try reducing the header padding with mobile toggle activated instead:
https://docs.generatepress.com/article/header-padding/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Thank you.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts