how to transparent a nvabar in HTML for desktop and same nave bar show on toggle in mobile screen.?

Question

hello everyone how to transparent a nvabar in HTML for desktop and same navebar show on toggle in mobile screen.? by using media query.

Answer 1

In HTML:

<div class="nav">
// opened navbar codes here
</div>

<div class="toggled">
// toggled navbar codes here
</div>

In CSS:

.toogle{
display:none;
}

@media only screen and (max-width: 500px){
.toogle{
display:block;
}

.nav{
display:none;
}
}