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/[email protected]/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 >
<div >
<div >
<a href="index.html">
<img alt="ArtUcii logo" src="images/Artucii_logo.png">
</a>
</div>
<ul >
<!-- Toggler/collapsibe Button -->
<!-- Navbar links -->
<li><a href="index.html">Home</a></li>
<li><a href="portfolio2.html">Portfolio</a>
<div >
<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>CodePudding user response：
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.
CodePudding user response：
To have the menu toggle open and closed you would need to use JavaScript.
Changes made to code:
I made the
header-contentclassdisplay: flexso that the navigation menu wasn't floating out of the container and the toggle would automatically justify to the opposite said from the logo usingjustify-content: space-between;on.navigation_content.I added an id of
#toggleto the toggle buttonand set it to not display on screens larger than 768px.I added an id of
#navigationto 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
liitemsdisplay: block,float: none, andheight: autoso 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 me know if you have any questions! :)
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 >
<div >
<div >
<a href="index.html">
<img alt="ArtUcii logo" src="images/Artucii_logo.png">
</a>
</div>
<span id="toggler">Menu Toggler</span>
<ul id="navigation" >
<!-- Toggler/collapsibe Button -->
<!-- Navbar links -->
<li><a href="index.html">Home</a></li>
<li><a href="portfolio2.html">Portfolio</a>
<div >
<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>