CODEWITHSUNDEEP
cssreactjs
Dan Wilstrop
Dan Wilstrop

Reputation: 445

How to prevent Navbar going under elements on mobile?

I have a responsive Navbar with hamburger for mobile (in React) and when it expands from off screen it floats under my form element as opposed to overlaying the whole screen. The transition and styling is all perfect. I have tried z-index and changing position settings and cant get this to work at all.

Nav

nav {
    display: flex;
    justify-content: space-around;
}

media - 
 .nav {
        z-index: 1000;
    }

    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #5D4994;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
    }

    .nav-links-toggle {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1000;
    }

jsx

<nav className = {toggle ? 'nav-active' : ''}>
            <div className = "logo">
                <img src = {logo} alt = 'logo' className='logo-pic' />
                <p>HearthStone Deck Creator</p>
            </div>
            <ul className = {toggle ? 'nav-links-toggle' : 'nav-links'} id = "nav">
                <li><Link to ='/'>Home</Link></li>
                <li><Link to ='/deckbuilder'>DeckBuilder</Link></li>
                <li><Link to ='/contact'>Contact</Link></li>
                <li><Link to ='/about'>About</Link></li>

            </ul>
            <div className={toggle ? 'toggle burger' : 'burger'} id = "burger" onClick = {handleClick}>
                <div className="line1"></div>
                <div className="line2"></div>
                <div className="line3"></div>
            </div>
        </nav>

form css

.input-search {
    width: 60vw;
    height: 6vh;
    border-radius: 10px;
    font-size: 1.5rem;
    transition: all 0.30s ease-in-out;
    outline: none;
    margin-bottom: 1.8rem;
    padding: 3px 0px 3px 3px;
    border: 1px solid #DDDDDD;
}

    


  [1]: https://i.sstatic.net/qTmeJ.png
  [2]: https://i.sstatic.net/GvVY7.png

Upvotes: 0

Views: 592

Answers (2)

Dan Wilstrop
Dan Wilstrop

Reputation: 445

I have fixed this with setting postion:relative and the z-index.

I then had to add a lower z-index to elements that would be covered

little bit of a bodge, but its working perfectly

Upvotes: 1

Jayr
Jayr

Reputation: 608

Have experienced likewise problem on mobile before. Where items being pushed behind elements with z-index defined also.

Have fixed it for mobile browser using:

transform:translateZ( );

CSS:

media - 
.nav {
    z-index: 1000;
    transform:translateZ(1000px);
}

Upvotes: 0

Related Questions