Archived topic
Keeping the social media icons on the sticky header
13 replies · Started by Bebe on December 6, 2017
Need to keep the social media icons on the sticky header as it scrolls.
Is that possible?
Your best bet would be to add them to the menu itself: https://docs.generatepress.com/article/adding-icons-to-menu-items/
Then we can hide them when the navigation isn't sticky if you like?
Let me know :)
Well, those social icons are the social widget that was recommended to use, I can't add those to the menu. And I'd rather not have the icons to the right of the menu, and push it over any further if it's avoidable.
If you want to to look the exact same, you would need to make the entire header sticky instead of just the navigation: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579
This code doesn't work. The same positioning that keeps it fixed at the top also causes the page not to scroll.
Is it possible instead to lock the top bar down on top of the sticky header? If so, I could use that to include the icons?
The method should work. Can you make sure to follow every step and leave it in so we can see what's not working?
Thanks!
Well, I got it to work, but it's sitting over top of the homepage slider...and it doesn't shrink at all when scrolling, so it's too large to view the content on the page.
Also look at it on mobile...it's sitting with a section of padding below the top of the page, and not "sticking" to the top.
It won't shrink without custom coding, which is why I suggested sticking with the navigation and adding your icons to it.
It won't sit over the content if you include this:
.custom-fixed-header + * {
padding-top: 120px;
}
That 120px needs to be the height of your sticky header.
It will also need to be adjusted for mobile, as a massive sticky header like that takes up too much real estate.
ok, so what are my options for keeping the top bar frozen, then having the sticky header shrink under it?
Hmm.. you don't have a huge amount of options here aside from what I've already suggested.
You could try using a plugin like this to add the widget into the menu: https://en-ca.wordpress.org/plugins/widgets-in-menu/
OK, I figured out a workaround. Now all I need is to be able to align the top bar items to the right and make them responsive. How is that done?
Looks like the top bar items are already align to the right?
What's not responsive about them?