What I need Help with
Hello everyone. I need help with trying to create a responsive navbar. I'm trying to make it so when the web page gets smaller than a hamburger menu will appear and then that can be clicked for a drop down menu of the tabs. If anyone can help me with this it will be appreciated.
Index.HTML
<!DOCTYPE html><html>
<head>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
</head>
<body>
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
<a href="index.html" >Home</a>
<a href="services.html">Services</a>
<a href="about.html">About Us</a>
<a href="blog.html">Contact</a>
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>
</body>
style/CSS file
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content
(content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
position: fixed;
padding-right: 10rem;
top: 0px;
right: 0px;
text-align:right;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
.icon{
}
CodePudding user response：
What you want is a media query. You can apply custom CSS when the screen width gets smaller.
html,
body {
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
min-height: 50px;
background-color: red;
}
.navitem {
width: 70px;
height: 50px;
line-height: 50px;
color: white;
text-decoration: none;
font-size: 20px;
display: inline-block;
text-align: center;
}
.navitem:hover {
background-color: white;
color: red;
}
.content {
padding: 10px;
}
@media screen and (max-width: 500px) {
/* This CSS is only applied when the screen width is smaller than 500px. */
.navitem {
display: block;
width: 100%;
}<div >
<a href="#" >Link 1</a>
<a href="#" >Link 2</a>
<a href="#" >Link 3</a>
<a href="#" >Link 4</a>
</div>
<div >
<h1>Media Queries</h1>
<p>Try resizing this window. The navigation links will show in stacks in mobile devices.</p>
</div>This is a small example where the navigation bar changes in mobile browsers. To use a hamburger button, you will need some javascript to toggle the menu. (Just give display: block to the hamburger button when on mobile)
CodePudding user response：
My humble suggestion is to 'stand on the shoulders of giants' so to speak and not code this yourself from scratch unless you really want the learning.
I recommend using MDBootstrap for creating responsive hamburger menus and other page controls you need. https://mdbootstrap.com/docs/standard/extended/hamburger-menu/
As a developer, it can be a good idea to let the devs who have spent days/weeks/months/years working on this stuff do the work - so you can focus on the work that's unique to your project - and so you can meet your deadlines on time.
Additionally when you use Bootstrap, you can be reasonably sure that these page elements will work across all platforms: i.e. will be compatible with various browsers, devices (mobile, laptop, etc.) and screen resolutions.