- This topic has 10 replies, 2 voices, and was last updated 1 year, 1 month ago by
Leo.
-
AuthorPosts
-
March 11, 2020 at 4:08 pm #1192375
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.
March 11, 2020 at 4:16 pm #1192379Leo
StaffCustomer SupportHi 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/March 12, 2020 at 6:58 pm #1193383Sam
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.
March 12, 2020 at 7:22 pm #1193393Leo
StaffCustomer Support1. 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/March 12, 2020 at 7:29 pm #1193395Sam
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;
March 12, 2020 at 7:35 pm #1193397Sam
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; } }
March 12, 2020 at 7:43 pm #1193399Sam
Ok, I was able to fix it by specifying:
margin-bottom: -20px;
March 12, 2020 at 7:47 pm #1193404Sam
All good.
March 12, 2020 at 9:39 pm #1193432Leo
StaffCustomer SupportInstead 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/March 13, 2020 at 7:43 am #1193948Sam
Thank you.
March 13, 2020 at 8:25 am #1193970Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.