[Support request] Keeping the social media icons on the sticky header

Home Forums Support [Support request] Keeping the social media icons on the sticky header

Home Forums Support Keeping the social media icons on the sticky header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #443301
    Bebe

    Need to keep the social media icons on the sticky header as it scrolls.
    Is that possible?

    #443406
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #443411
    Bebe

    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.

    #443412
    Tom
    Lead Developer
    Lead Developer

    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

    #443798
    Bebe

    This code doesn’t work. The same positioning that keeps it fixed at the top also causes the page not to scroll.

    #443799
    Bebe

    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?

    #444024
    Leo
    Staff
    Customer Support

    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!

    #444048
    Bebe

    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.

    #444055
    Bebe

    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.

    #444168
    Tom
    Lead Developer
    Lead Developer

    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.

    #444196
    Bebe

    ok, so what are my options for keeping the top bar frozen, then having the sticky header shrink under it?

    #444317
    Tom
    Lead Developer
    Lead Developer

    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/

    #445024
    Bebe

    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?

    #445050
    Leo
    Staff
    Customer Support

    Looks like the top bar items are already align to the right?

    What’s not responsive about them?

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.