Archived topic

Top bar + header sticky

3 replies · Started by Raul on November 16, 2021

Viewing posts 1–4 of 4

November 16, 2021 at 3:00 am #2006067

Hello,
I recently installed generatepress on croqueart.com, and i want to make the topbar(made with hook, generate_before_header) and header with navigation sticky. I set the sticky navigation to on and put the custom css from the support forum sticky top bar, but the top bar isn't sticky. Can you help?

Thanks,
Stefan Paul

November 16, 2021 at 3:46 am #2006114

Hi there,

you have this CSS:

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

Change it to:

.above-header-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100000;
}
.admin-bar .above-header-bar {
    top: 32px;
}

November 16, 2021 at 10:26 am #2006856

Great, it's working on desktop, but on mobile there is a gap, and the menu it's not showing.

Thanks,
Stefan Paul

November 17, 2021 at 3:28 am #2007508

Hmmm... need to make some modifications for the changing height of the Top Bar and the Admin bar:
Replace this:

.admin-bar .above-header-bar {
    top: 32px;
}

with:

@media(min-width: 783px) {
    .admin-bar .above-header-bar {
        top: 32px;
    }
}
@media(max-width: 782px) and (min-width: 600px) {
    .admin-bar .above-header-bar {
        top: 46px;
    }
}

And this CSS:

.sticky-enabled .main-navigation.is_stuck {
    top: 40px !important;
}

replace with:

.sticky-enabled .main-navigation.is_stuck {
    top: 40px !important;
}

@media(max-width: 529px) {
    .sticky-enabled .main-navigation.is_stuck {
        top: 64px !important;
    }
}

This archived topic is closed to new replies.

Start building better websites today.