How do i get my sticky navbar to work using tailwind css?

Question

I am working on a website using tailwindcss. But for some reason the navbar wont work when using the "sticky" class. I tried using the "fixed" class instead, but that did not work with the banner. I have also tried to use:

nav {
    position: -webkit-sticky;
    position: sticky;
}

but it has been usuccessful. I have also used some other css and javascript to style the searchbar how i want it. How can i get the navbar to always stick?

Here is the code for the nav and the banner:

The css code i used for the searchbar:

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    nav {
        position: -webkit-sticky;
        position: sticky;
    }
    
     .input-search-field::-webkit-search-cancel-button { 
        -webkit-appearance: none;
        border-radius: 20px;
    
    }
    
    .input-search-field[type="search"] {
        position: relative;
    }
    .input-container {
        display: flex;
        align-items: center;
        position: relative;
    }
    .hero {
        width: 15px;
        position: absolute;
        left: 150px;
        cursor: pointer;
    } 
    
    .container .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
}

Javascript:

var result = document.querySelector('.hero').addEventListener('click', myfunction)
function myfunction() {

var input = document.querySelector('#in').value="";

}
console.log(result);

const burger = document.querySelector('#burger');
const menu = document.querySelector('#menu');

burger.addEventListener('click', () => {
    if (menu.classList.contains('hidden')) {
        menu.classList.remove('hidden');
    } else {
    menu.classList.add('hidden');
    }
})

How do i get my sticky navbar to work using tailwind css?

Answers (1)

Related Questions