- This topic has 13 replies, 3 voices, and was last updated 6 years, 3 months ago by Leo.
-
AuthorPosts
-
December 6, 2017 at 11:56 am #443301Bebe
Need to keep the social media icons on the sticky header as it scrolls.
Is that possible?December 6, 2017 at 2:09 pm #443406TomLead DeveloperLead DeveloperYour 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 🙂
December 6, 2017 at 2:15 pm #443411BebeWell, 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.
December 6, 2017 at 2:18 pm #443412TomLead DeveloperLead DeveloperIf 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
December 7, 2017 at 4:06 am #443798BebeThis code doesn’t work. The same positioning that keeps it fixed at the top also causes the page not to scroll.
December 7, 2017 at 4:08 am #443799BebeIs 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?
December 7, 2017 at 8:29 am #444024LeoStaffCustomer SupportThe method should work. Can you make sure to follow every step and leave it in so we can see what’s not working?
Thanks!
December 7, 2017 at 8:41 am #444048BebeWell, 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.
December 7, 2017 at 8:44 am #444055BebeAlso 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.
December 7, 2017 at 11:04 am #444168TomLead DeveloperLead DeveloperIt 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.
December 7, 2017 at 11:31 am #444196Bebeok, so what are my options for keeping the top bar frozen, then having the sticky header shrink under it?
December 7, 2017 at 2:24 pm #444317TomLead DeveloperLead DeveloperHmm.. 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/
December 8, 2017 at 11:01 am #445024BebeOK, 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?
December 8, 2017 at 11:25 am #445050LeoStaffCustomer SupportLooks like the top bar items are already align to the right?
What’s not responsive about them?
-
AuthorPosts
- You must be logged in to reply to this topic.