[Resolved] Sticky icons in nav bar and white space before footer

Home Forums Support [Resolved] Sticky icons in nav bar and white space before footer

Home Forums Support Sticky icons in nav bar and white space before footer

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #288007
    Linda

    Hi there!

    I was hoping someone may be able to help me. I’ve placed two social icons in my sticky navigation bar and positioned them to be on top of the main links so that it looks like a secondary bar. The issue I’m having is when you scroll down, these icons fall onto the navigation links below them. I’m scratching my head over how to fix this as I’m a designer, not a developer but this along with the next issue are the only two things keeping me from fully completing the site.

    The other issue I’m facing is on the Home page, just before the footer there is a white gap. There is no white gap on the other pages and they work perfectly fine, but it only appears on the Home Page. All pages use Elementor builder – the only difference on the home page is that there is a Slider (smartslider3) at the top. I’ve already tried creating a new page from scratch, but alas the white gap comes back.

    The staging link is here: http://www.sgdev.llinda.fr

    Thanks a bunch if anyone can lend me a hand!!!!
    (Great framework by the way, I love it).

    Cheers
    L

    GP Premium 1.2.94
    #288065
    Tom
    Lead Developer
    Lead Developer

    Your CSS is currently:

    .social-icon {
        float: right;
        color: #fff;
        margin-left: -120px;
        padding-right: 100px;
        padding-: 0px;
    }

    Try this instead:

    .social-icon {
        float: right !important;
        color: #fff;
        margin-left: -120px;
        padding-right: 100px;
    }

    To remove that white space, try setting your content layout to one container in “Customize > Layout > Container”.

    Glad you’re enjoying the theme! πŸ™‚

    #288071
    Linda

    That worked!!! You’re a legend Tom! πŸ˜€

    That was the fastest and most helpful support I’ve received. Thank you!

    #288072
    Linda

    Me again! So it seems as if only the first of the icons are linked (I’ve added links to both icons). Any guesses as to why that may be happening?

    #288073
    Tom
    Lead Developer
    Lead Developer

    Hmm, that’s coming from the way you’ve positioned the menu items.

    Have you considered adding them as regular links in the header widget instead of adding them to the menu?

    #288075
    Linda

    I didn’t think of that actually. I just gave it a go and they’re showing up stacked on top of each other with no fields to define a css class. When I scroll, they don’t stick to the top with the nav bar so I’m not sure if this will be simpler. You can refresh the page to see what I’ve done πŸ™‚

    #288079
    Tom
    Lead Developer
    Lead Developer

    And you 100% want the icons above your menu items and not next to them? (like our demo: http://demo.generatepress.com).

    If so, can you under my recommendation above and I’ll look for another solution πŸ™‚

    #288085
    Linda

    Yes please, because it would be great if they could be sticky πŸ™‚

    Thank you, I will!

    #288106
    Tom
    Lead Developer
    Lead Developer

    They would be sticky if they were aligned with the other menu items? Would look a lot cleaner in my opinion as they would all be in a row.

    Just tried your site again and your server seems to be down.

    Let me know when it’s up again and I’ll take a look πŸ™‚

    #288203
    Linda

    They stick when I align them with the other menu items, but funny now the other menu items move. The site’s back up again πŸ™‚

    #288307
    Tom
    Lead Developer
    Lead Developer

    What if you remove this CSS you’ve added:

    .main-navigation .main-nav ul li a {
        height: 40px;
    }
    .main-navigation .main-nav ul li a {
        line-height: 0px;
    }

    And just use the menu item height option in Customize > Layout > Primary Navigation?

    #288671
    Linda

    Hi Tom,

    It seems to be working when I remove those and keep the Primary Navigation height at 0. I had to make a few CSS adjustments. It’s not perfect (the bottom of the blue nav bar shrinks when I scroll) but it’s a promising improvement! Thanks for all your support! πŸ˜€

    #288894
    Tom
    Lead Developer
    Lead Developer

    Did you try my suggestion above? It should offer the same results without the shrinking blue nav bar.

    #290628
    Linda

    I did and this caused the shrinking nav bar. When I increase the height, the nav links move when you scroll as they appear higher in their initial state…

    #290638
    Linda

    Oh, I figured it out.

    I had added height: 80px to this class:

    .nav-float-right .main-navigation.is_stuck:not(.grid-container)

    when the .site-header is at 100px. The reason I did that was to adjust the nav height on the mobile view. (It was adding on space when I scrolled on mobile). I wonder if I can keep it at 80px height on mobile only? At least the desktop view looks fine now…

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