How to write HTML CSS code for a header navbar that too responsive

Question

I want to make a Navbar but I am unable to write the correct CSS styles for the same. How to make a navbar with logo image floating to left and menu content floating to the right.

I tried plain CSS but that didn't work.

Answer 1

Try this one - HTML for navigation bar

    <section>
    <picture>
        <source srcset="../assets/images/logos/my_logo/My_Logo1.png" type="image/png+xml" title="logo - Kaviya">
        <img src="./My_Logo.svg" alt="" width="57" title="logo ">
    </picture>

    <div class="navIcon">
        <img src="../assets/images/icons8-menu-128.png" alt="" width="50" id="menu">
    </div>
    <div class="navIcon">
        <img src="../assets/images/icons8-close-64.png" alt="" width="50" id="menu_close">
    </div>


    <nav>
        <dl id="header_navigation" >
            <dd><a href="#home">Home</a></dd>
            <dd><a href="#about">About</a></dd>
            <dd><a href="#project">Project</a></dd>
            <dd><a href="#assignment">Assignment</a></dd>
            <dd><a href="gallery.html">Gallery</a></dd>
            <dd><a href="#contact">Contact</a></dd>
        </dl>

        <div id="mobile_navigation">

            <dl id="header_navigation_mobile" >
                <dd><a href="#home">Home</a></dd>
                <dd><a href="#about">About</a></dd>
                <dd><a href="#project">Project</a></dd>
                <dd><a href="#assignment">Assignment</a></dd>
                <dd><a href="gallery.html">Gallery</a></dd>
                <dd><a href="#contact">Contact</a></dd>
            </dl>

        </div>


    </nav>
</section>

Implement your css -

#header_navigation>dd{
display: inline;
margin: 1vw;
}
#mobile_navigation {
position: absolute;
right: 0;
opacity: 0;
transform: translateX(20px);
width: 20vw;
height: 100vh;
background: #F3FFF1;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
transition: all 0.5s ease;
display: none;
}
#mobile_navigation > dl > dd > a {
text-decoration: none;
color: black;
font-weight: bold;
position: relative;
font-family: 'Oswald', sans-serif;

}
#mobile_navigation > dl > dd{
display: grid;
margin-top: 7vh;
}
header{
position: sticky;
top: 0;
background: #ffffff;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
padding: 1vh;
z-index: 99999;
}
.navIcon{
display: inline;
position: absolute;
right: 5vw;
}

nav > dl > dd > a {
 text-decoration: none;
color: black;
font-weight: bold;
position: relative;
font-family: 'Oswald', sans-serif;
}

#menu_close,#menu{
display: none;
}

@media all and (min-width: 1024px) {

#menu_close,#menu,#mobile_navigation{
    display: none !important;
}

header > section > nav >#header_navigation {
    position: absolute;
    right: 10%;
    top: 15%;
}
header > section > picture{
    position: relative;
    left: 10%;
}

#header_navigation > dd > a:hover::after {
    background-color: green;
    width: 100%;
}

#header_navigation > dd > a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: transparent;
    bottom: -8px;
    left: 0;
    transition: width 0.3s ease;
 }
}
 @media all and (max-width: 1000px ){

nav>#header_navigation{
    display: none;
}
#menu{
    display: block;
    transition: all 0.5s ease;
}
#menu_close{
    transition: all 0.5s ease;
}
#mobile_navigation {
    width: 30vw;
    z-index: 1111;
}

}

And Implement thisheader navigation Js file..

 $("#menu").on("click", () => {

$("#menu").css("transform", "rotate(180deg)");
$("#menu_close").css("transform", "rotate(180deg)");
$("#mobile_navigation").css("display", "block");

// Apply the transitioned styles
setTimeout(() => {

    $("#menu").css("display", "none");
    $("#menu_close").css("display", "block");
    $("#mobile_navigation").css("opacity", "1");
    $("#mobile_navigation").css("transform", "translateX(0)");


}, 300); // Add a slight delay to allow the initial styles to take effect
});

$("#menu_close").on("click", () => {

$("#menu_close").css("transform", "rotate(-180deg)");
$("#menu").css("transform", "rotate(-180deg)");

// Apply the transitioned styles
setTimeout(() => {

    $("#menu_close").css("display", "none");
    $("#menu").css("display", "block");
    // $("#mobile_navigation").css("display", "none");
    $("#mobile_navigation").css("opacity", "0");
    $("#mobile_navigation").css("transform", "translateX(100%)");

}, 300); // Add a slight delay to allow the initial styles to take effect
});

But I suggest you to do it using bootstrap. It was a very simple way to create the navigation bar