bottom navigation menu html/css - html

Question

I want to make a website with a normal top menu on big screens and a bottom menu in small screens but I'm confused if I need to create two different menus.
For example:
<nav class="menu">
<img src="logo.png" alt="logo">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<nav class="mobile-menu">
<ul>
<li>
<i class="fas fa-search"></i>
</li>
<li>
<i class="fas fa-settings"></i>
</li>
<li>
<i class="fas fa-home"></i>
</li>
</ul>
</nav>
Or is there another way to do this?
I want a menu like this on big screens:
And like this on small screens:

Answer 1

You can use CSS #media queries to change the style of the menu based on screen size.
For example
.menu {
position: fixed;
top: 0;
width: 100%;
/* ... */
}
/* this will override the settings above when the screen size is smaller than 600px wide */
#media (max-width: 600px) {
.menu {
top: auto;
bottom: 0;
}
}

Answer 2

If you want to only use HTML and CSS you can use display none with Media Querys so it displays the correct nav on different sizes. If you know how to use JavaScript use can rewrite the content of the with .innerHTML and using JS media querys.
See this Bootstrap example. They are changing the class in the html as the screen is being resized. https://getbootstrap.com/docs/5.0/components/navbar/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>