Site logo

Archived topic

Top-bar overlay issue

5 replies · Started by chris on June 19, 2021

Viewing posts 1–6 of 6

Hi im having an issue with my top-bar

i removed top:0 from the css to stop it displaying behind the wordpress admin bar, but on all pages other than the home page, the top-bar is displaying over laying the header, with a white gap at the top.

How can i fix this please?

Hi there,

The issue is coming from the position: fixed; in this CSS you've added:

.top-bar {
    position: fixed;
    width: 100%;
    border-radius: 0px 0px 5px 5px;
    z-index: 300;
}

Are you wanting to create a sticky top bar?

Let me know :)

Hey yeah i am it it seems to be sticky? but without code ahaha..? It scrolls with you when scrolling down but the gap above it on any page but the home page is what im trying to remove. Do you see the gap i am referring too? thanks..

Hi there,

change your CSS to this:

.top-bar {
    position: fixed;
    width: 100%;
    border-radius: 0px 0px 5px 5px;
    z-index: 300;
    top: 0;
}
/* Adjust position when admin bar is present */

.admin-bar .top-bar {
    top: 32px; /* Height of admin bar */
}

Cheers!

You're welcome

This archived topic is closed to new replies.