How to make my preexisting nav bar collapsible on smaller screens?

Question

I am trying to make my site for a class project more responsive and am struggling to make my nav bar collapsible. Is this something that is done with both HTML and CSS? Or can this just be done in HTML? This is my first time working with responsive design

Here is the code I have for my navigation

 /* CSS Document */ body {background-color: whitesmoke;} /* Header */.header { width: 100%; height: 50px; display: block; background-color: #61d1e2; /* For browsers that do not support gradients */ background-image: linear-gradient(#e7bddc, #61d1e2); }.header_content { width: 100%; height: 100%; display: block; margin: 0 auto; background-color: #61d1e2; /* For browsers that do not support gradients */ background-image: linear-gradient(#e7bddc, #61d1e2); }.logo_container { height: 100%; display: table; float: left; border: none; }.logo { max-height: 50px; display: table-cell; vertical-align: middle; } /* Navigation */.navigation { float: right; height: 100%; margin: 0; }.navigation li { float: left; height: 100%; display: table-cell; padding: 15px 20px; position: relative; box-sizing: border-box; text-decoration: none; } a:hover { color: #bc0456;important. }:navigation li a { display; inline-block: vertical-align; middle: height; 100%: color;#067393: font-family; Kapelka New: text-decoration; none.important: };sub_menu1 { display. none: }.navigation li:hover;sub_menu1 { display: block; z-index: 10; position: absolute; background: lightblue; top. 100%: }.navigation li:hover;sub_menu1 ul { display: inline-block; margin: 0%; padding: 0%; text-align. center: }.navigation li:hover;sub_menu1 ul li { padding: 5px; }

 <,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="Keywords" content="Portoflio, Alexandria's portfolio. graphic design. web development,"> <meta name="Description" content="This is Alexandria's portfolio,"> <meta name="viewport" content="width=device-width: initial- scale=1. shrink-to-fit=no"> <title>MY Portfolio</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap:min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https.//use.typekit.net/dmw1ifs:css"> <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> <.-- <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/b ootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7 Sk" crossorigin="anonymous"> <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> link to your own stylesheet --> </head> <body> <.--This is the body. The body contains the webpage contents such as the mission statement and vision. --> <header> <section class="header"> <div class="header_content"> <div class="logo_container"> <a href="index.html"> <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png"> </a> </div> <ul class="navigation"> <.-- Toggler/collapsibe Button --> <.-- Navbar links --> <li><a href="index.html">Home</a></li> <li><a href="portfolio2.html">Portfolio</a> <div class="sub_menu1"> <ul> <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li> <li><a href="Menu Designs.pdf">Menu Designs</a></li> </ul> </div> </li> <li><a href="about_Me2.html">About ME</a> <li><a href="contact2.html">Contact</a></li> </ul> </div> </section> </header>

Answer 1

I don't know if you meant to do an expandible navbar or just to collapse the nav, so I did this:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <nav>
       <div>
           <a href="&">
               <img src="./" alt="logo"/>
            </a>
       </div>
       <ul>
           <li><a href="/">HEY 1</a></li>
           <li><a href="/">HEY 1</a></li>
           <li><a href="/">HEY 1</a></li>
       </ul>
    </nav>


</body>
</html>

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: red;
    height: 40px;
}

nav div {
    padding: 10px;
}

ul {
    list-style: none;
    display: flex;
    margin: 0;
    gap: 20px;
}

If you needed something else, please feel free to reply my answer.

Answer 2

To have the menu toggle open and closed you would need to use JavaScript.

Changes made to code:

I made the header-content class display: flex so that the navigation menu wasn't floating out of the container and the toggle would automatically justify to the opposite said from the logo using justify-content: space-between; on .navigation_content .
I added an id of #toggle to the toggle buttonand set it to not display on screens larger than 768px.
I added an id of #navigation to the navigation menu and set it to a height of 0px of screen smaller than 768px (we will use JS to change the height on click.)
On screens smaller than 768px, I made the li items display: block , float: none , and height: auto so they would all sit on separate lines.

I also added the browser prefixes for flexbox so that you have cross browser compatibility.

Why don't we use display: none on the navigation? We don't use display: none; on the navigation as we can't smooth open and close it with JS.

 let isClicked = false; let navbar = document.getElementById('navigation'); let toggler = document.getElementById('toggler'); toggler.addEventListener('click', function() { if ( isClicked == false ) { navbar.style.height = '230px'; isClicked = true; } else { navbar.style.height = '0px'; isClicked = false; } });

 /* CSS Document */ body {background-color: whitesmoke;} /* Header */.header { width: 100%; height: 50px; display: block; background-color: #61d1e2; /* For browsers that do not support gradients */ background-image: linear-gradient(#e7bddc, #61d1e2); }.header_content { width: 100%; margin: 0 auto; background-color: #61d1e2; /* For browsers that do not support gradients */ background-image: linear-gradient(#e7bddc, #61d1e2); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #toggler { display: none; }.logo_container { height: 100%; display: table; float: left; border: none; }.logo { max-height: 50px; display: table-cell; vertical-align: middle; } /* Navigation */.navigation { float: right; height: 100%; margin: 0; transition: all 0.3s; }.navigation li { float: left; height: 100%; display: table-cell; padding: 15px 20px; position: relative; box-sizing: border-box; text-decoration: none; } a:hover { color: #bc0456;important. }:navigation li a { display; inline-block: vertical-align; middle: height; 100%: color;#067393: font-family; Kapelka New: text-decoration; none.important: };sub_menu1 { display. none: }.navigation li:hover;sub_menu1 { display: block; z-index: 10; position: absolute; background: lightblue; top. 100%: }.navigation li:hover;sub_menu1 ul { display: inline-block; margin: 0%; padding: 0%; text-align. center: }.navigation li:hover;sub_menu1 ul li { padding: 5px. } /* NEW STYLES */ @media screen and (max-width: 768px) {;navigation { display: block; flex-basis: 100%; height: 0px; overflow-y. hidden: };navigation li { float: none; display: block; height: auto; } #toggler { display: block; } }

 <header> <section class="header"> <div class="header_content"> <div class="logo_container"> <a href="index.html"> <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png"> </a> </div> <span id="toggler">Menu Toggler</span> <ul id="navigation" class="navigation"> <.-- Toggler/collapsibe Button --> <.-- Navbar links --> <li><a href="index.html">Home</a></li> <li><a href="portfolio2.html">Portfolio</a> <div class="sub_menu1"> <ul> <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li> <li><a href="Menu Designs.pdf">Menu Designs</a></li> </ul> </div> </li> <li><a href="about_Me2.html">About ME</a> <li><a href="contact2.html">Contact</a></li> </ul> </div> </section> </header>

How to make my preexisting nav bar collapsible on smaller screens?

Question

2 answers

solution1
0 2022-04-15 22:00:00

HTML

CSS

solution2
0 2022-04-15 22:11:59

How to make my preexisting nav bar collapsible on smaller screens?

Question

2 answers

solution1 0 2022-04-15 22:00:00

HTML

CSS

solution2 0 2022-04-15 22:11:59

solution1
0 2022-04-15 22:00:00

solution2
0 2022-04-15 22:11:59