[Resolved] Sticky nav and top bar

Home Forums Support Sticky nav and top bar

This topic contains 6 replies, has 2 voices, and was last updated by  David 1 week, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1285547

    Dean

    Hello, I have looked through the forum and found some CSS which appears to be working fine for me. I can’t share the URL at the moment as it is a “Private” page behind an “under construction” splash page — but could setup one if needed.

    Anyway — the code seems to work fine. However, the post I used as a reference ( from August 2018 talks about this being an “experimental” approach.

    I’ve used my own version as here:

    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 200;
    }
    .sticky-enabled .main-navigation.is_stuck {
        top: 66px !important;
    }
    @media (max-width: 768px) {
        .sticky-enabled .main-navigation.is_stuck {
            top: 103px !important;
        }
    }
    @media (max-width: 450px) {
        .sticky-enabled .main-navigation.is_stuck {
            top: 90px !important;
        }
    }

    Which works fine — I’m just wondering how universal support is for that approach?

    I’ve got TWO media queries because, as the viewing size decreases, my Top Bar *increases* in size as it transitions from a single line (logo on left, contact info on right) to two lines (contact info first line, logo underneath) — I like this, but found I need these media queries to make sure the MENU bar stays below the increased height of the Top Bar.

    Is this the best approach, or is there another way to accommodate the Top Bar being always visible, and growing in pixel height as the viewing width decreases?

    I can supply screen shots if that helps.

    Thanks.

    #1285552

    Dean

    To be clear, the top nav changes in size as I reduce the width, and these two breakpoints seem best to handle making sure the MENU bar stays below the TOP BAR (but without any gap where underlying content is visible.

    What would be ideal is some way of having the CSS adjust the “top” position of the menu as the width shrinks and the top bar changes in size.

    #1285587

    David Customer Support

    Hi there,

    It’s now well supported ( apart from IE 11 as expected ):

    https://caniuse.com/#search=position%3A%20sticky%3B

    Apart from giving the Top Bar a min-height thats greater then any of its current responsive sizes that approach looks good to me. The only other way would require JS to calculate the size

    #1285592

    Dean

    Thanks David, great to know.

    Sorry, I added the bold *after* you replied. I guess that means it’s only adjustable “on the fly” via JS?

    What happens is that a slight gap appears between the Top Bar and the Menu bar, where you can see the content underneath as it scrolls (which visually looks a bit messy) — is there any way to address that and darken or cover the gap?

    Many thanks.

    #1285621

    David Customer Support

    Yeah on the fly changes require JS – which could introduce a host of other performance issues or jumpiness.

    Is the gap there all the time or only when resizing the browser?
    Maybe the .top-bar {min-height: 103px;} is a good solution for that?

    #1285635

    Dean

    Thanks David, yes, am keen to avoid JS for many reasons.

    Ah yes, great idea, min-height — will work with that. I’m sure that’ll give me the result I’m after. That sounds perfect.

    I was almost going to give up and just have the Sticky Nav, but this is awesome thanks.

    Many thanks again!

    PS: Sadly I can’t leave more than one 5-star review of GeneratePress! But then there’s the FB community to show support too 😀

    #1285926

    David Customer Support

    Well you could try this:

    add_action( 'after_setup_theme', 'db_move_top_bar_inside_navigation' );
    function db_move_top_bar_inside_navigation() {
        remove_action( 'generate_before_header', 'generate_top_bar', 5 );
        add_action( 'generate_inside_navigation', 'generate_top_bar', 10 );
    }

    It will put the Top Bar inside the Sticky Nav.
    You may have to set the Nav to full width and use a little CSS to position it but will then be part of the Sticky Nav…

    Haven’t tested it ….

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.