Issue
I want to make this type navbar responsive. I showed PC and mobile style. enter image description here Please help me. Thanks
Solution
I highly recommend you, use bootstrap for making this type of project easier!
but if you want a CSS-only solution here is:
pc version: 
mobile version: 
I added also a comment, so you can understand well
body {
/* deleting the default margin */
margin: 0;
}
.navbar {
/* setting the height of navbar */
--nav-height: 3rem;
height: var(--nav-height);
/* centering */
display: grid;
place-items: center;
/* logo: auto (less space)
input: all space width
other: auto (less space)
*/
grid-template-columns: auto 1fr auto;
/* little padding */
padding: 0 0.5rem;
/* a gap between elements of navbar */
gap: 0.5rem;
}
/* css for the menu icon */
.navbar svg {
height: calc(var(--nav-height) / 2);
padding: 0 0.5rem;
}
/* css for the container of input and menu icon */
.navbar #second-container {
display: grid;
/* menu icon take less space
input take 100% space */
grid-template-columns: auto 1fr;
/* making the container take all the space */
width: 100%;
}
/* css for the input */
.navbar #second-container input {
display: grid;
height: calc(var(--nav-height) / 2);
}
/* css for the other things on the right side of the nav*/
.navbar #third-container img {
height: calc(var(--nav-height)/ 1.5);
}
/* responsive for mobile devices */
@media (max-width: 768px) {
.navbar {
grid-template-columns: 1fr;
}
.navbar #third-container {
display: none;
}
}<body>
<nav class="navbar">
<!-- 1 -->
<div id="first-container">
<!-- logo -->
<span>your logo</span>
</div>
<!-- 2 -->
<div id="second-container">
<!-- menu Icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>
<input type="text" placeholder="search bar">
</div>
<!-- 3 -->
<div id="third-container">
<img src="https://picsum.photos/30" alt="">
<img src="https://picsum.photos/30" alt="">
<img src="https://picsum.photos/30" alt="">
<img src="https://picsum.photos/30" alt="">
<img src="https://picsum.photos/30" alt="">
</div>
</nav>
</body>Answered By - Laaouatni Anas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.