1

I am working on my first portfolio site. I created this navbar and it seemed to work until I finally tested it with chrome dev tools. I tried isolating just the nav bar and it seems to have the same issue. It just doesn't stick to the top when I scroll down on mobile, but when I scroll up it sticks there. Super frustrating but I'm going to keep at it.

Here is the code pen https://codepen.io/kylemt03/pen/WNKEZjg

/* Nav */

nav {
    display:flex;
    justify-content:space-around;
    align-items:center;
    min-height:8vh;
    background-color:var(--blue);
    position:sticky;
    top:0;
    z-index:1;
    box-shadow:1px 1px 2px rgb(0 0 0 / 50%);
    width:100%;
}

.logo {
    color:var(--white);
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size:3em;
    text-shadow:gray 2px 2px 4px;
}

.logo a {
    color:var(--white);
}

.nav-links {
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    width: 45%;
    letter-spacing:2px;
    font-size:1em;
    list-style: none;
    align-items: center;
}

.nav-links li {
    display:inline-block;
}

.fancy-links {
    color:var(--white);
    position: relative;
}

.nav-links a {
    color:var(--white);
}

.fancy-links::after {
    content:"";
    position: absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin: right;
    transition:all 0.4s ease-in-out;
}

.fancy-links:hover::after {
    transform:scaleX(1);
    transform-origin: left;
}

.fa-brands {
    font-size:1.25em;
}

/* Burger Menu */

.burger {
    display:none;
}

.burger div {
    width:25px;
    height:5px;
    background-color:white;
    margin:5px;
}

please see the codepen for all the code. There's too much for here.

Any help is appreciated!

I've tried removing some bits and now isolating it to the just the navbar. The result seems to be the same. I specifically tried removing my slide in nav-links and that also did not the change the behavior

This is my first time posting if the post looks terrible, that's why!

kylemt
  • 11
  • 2
  • unfortunately sticky navbar won't work with all browsers ... i suggest you use a js code to have a sticky navbar and don't waste ur time with it... if it work, u will have lots of issues with the positions and so on... – Ali Safaei Jan 15 '23 at 21:32

1 Answers1

0

I can't replicate the issue on my end but I have a guess:

In your codepen there's this line: overflow-x: clip, hidden;, which is invalid CSS but your mobile browser might interpret it in some way that allows overflow-x: hidden; to apply, which would prevent position: sticky from working the way you intend it to.

Remove the line and see if that makes a difference.

marvinscham
  • 42
  • 1
  • 5