How can I add a responsive hamburger menu to my site?

1

I want to implement the hamburger menu to my nav in order to make it responsive but I’m struggling to implement the tutorials online into my code.
This is my nav html :

<nav>  <!--Nav-->
            <p class="header-logo" > Bittek</p>
            <ul class="nav-list">
                <li><a href="" class="nav-link">Home</a></li>
                <li><a href="" class="nav-link">About</a></li>
                <li><a href="" class="nav-link">Blog</a></li>
                <li><a href="" class="nav-link">Project</a></li>
            </ul>
            <a href="#" class="cta"><button>Contact</button></a>
        </nav>

This is my css for the navigation menu

nav{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 10%;
    background-color: #24252A;
}

.nav-list{
    display:flex;
}

li,a,button,.header-logo{
    color:#edf0f1;
    font-size:16px;
}
.header-logo{
    margin-right: auto;
    cursor:pointer;
}

.nav-list{
    list-style: none;
}

.nav-list li{
    display: inline-block;
    padding: 0px 20px;
}

.nav-list li a{
    transition: all 0.3s ease 0s;
}

.nav-list li a:hover{
    color: #0088a9;
}

button{
    padding: 9px 25px;
    background-color: rgba(0,136,169,1);
    border:none;
    border-radius:50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    margin-left:20px;
}

button:hover{
    background-color: rgba(0,136,169,0.8);
}

This is my nav in desktop view:

doubt
doubt1897×114 5.66 KB

When the screen size is less than 768px, I want only the “bittek” text and the hamburger menu to be shown. When the menu is clicked, the nav-links and the contact button will be on top of each other as one column.

1 Like
2

The easiest way to do this is using Bootstrap, the official docs is here:


and there is a ton of examples if you just google “bootstrap hamburger menu”
/Jakob
3

is there an easy way to do it with only css

4

You can do a lot of fancy stuff with CSS but easy is far fetched. I will not rule out that it can be done with CSS alone but you will have to call on some of the CSS experts for that.
In the meantime, the easiest way to do it is to follow the manual and use Bootstrap and jQuery
/Jakob