I am following this tutorial EDIT: changed link to specific time of video https://www.youtube.com/watch?v=XZsuI5wyRzs&feature=youtu.be&t=560 on how to make a responsive nagivation bar before I dive into the main content.
For some reason at this part of the timeline here (I saved the link to current time so you can see what I'm talking about without having to skim through the video) I followed the steps exactly, but my hamburger icon is not being activated when it is clicked in order to bring down the drop-down menu. Other than that, everything else looks pretty good. What is wrong with my code? Please take a look at it below.
Thanks
/*CSS Page*/
/*-----HTML Body-----*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*----End HTML Body-----*/
/*-----Start of Navigation Bar-----*/
nav {
width: 100%;
background: #8000ff;
}
ul {
width: 50%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
/*For mouse hover*/
ul li:hover {
background: #4dff4d;
}
/*Smartphone/Tablet: Menu Bar*/
.toggle {
width: 100%;
padding: 10px 20px;
background: #cc66ff;
text-align: right;
box-sizing: border-box;
color: #000000;
font-size: 30px;
display: none;
}
/*-----End of Navigation Bar-----*/
/* Media Queries for Smaller Screen Size Begins */
#media (max-width: 786px) {
.toggle {
display: block;
}
/* Navigation Drop down */
ul {
width: 100%;
display: none;
}
/* End Navigation Drop Down */
ul li {
display: block;
text-align: center;
}
.active {
display: block;
}
}
/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>
<!--HTML Page-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
</head>
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready() {
$('menu').click(function() {
$('ul').toggleClass('active')
})
})
</script>
</body>
</html>
2 issues...
Missing callback function on the ready event...
$(document).ready()
Need to be this...
$(document).ready(function () {
You're missing the '.' in front of 'menu' class selector...
$('menu')
Needs to be like this...
$('.menu')
Working example below...
/*CSS Page*/
/*-----HTML Body-----*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*----End HTML Body-----*/
/*-----Start of Navigation Bar-----*/
nav {
width: 100%;
background: #8000ff;
}
ul {
width: 50%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
/*For mouse hover*/
ul li:hover {
background: #4dff4d;
}
/*Smartphone/Tablet: Menu Bar*/
.toggle {
width: 100%;
padding: 10px 20px;
background: #cc66ff;
text-align: right;
box-sizing: border-box;
color: #000000;
font-size: 30px;
display: none;
}
/*-----End of Navigation Bar-----*/
/* Media Queries for Smaller Screen Size Begins */
#media (max-width: 786px) {
.toggle {
display: block;
}
/* Navigation Drop down */
ul {
width: 100%;
/* display: none; */
display: block;
height:0px;
transition: height 0.5s linear;
overflow: hidden;
}
/* End Navigation Drop Down */
ul li {
display: block;
text-align: center;
}
.active {
/* display: block; */
height: 300px;
}
}
/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>
<!--HTML Page-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
</head>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.menu').click(function() {
$('ul').toggleClass('active')
})
})
</script>
</body>
</html>
Related
i'm here to beg for your help! the problem is regarding Navigation bar, and the text/links for it.
The issue is that the last list item is all the way to the right of the header, i want to move everything to the left, not to center it completly, just to be able to move it bit by bit to fit it for my purpose!
Thanks on beforehand
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80% margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: right;
}
nav ul {
margin 0;
padding 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 20px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
.logo {
float: left;
padding: 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
try putting a margin-right: 50px or something on your nav tag
Please see the code snippets on CSS parts for the change. I hope this is your expected output.
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
put margin-right: how much you want px on your nav tag, and don't forget to create a div to the logo, because if you put the margin-right the logo will go togheter to the left.
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I'm not sure why, but there is a small gap between my nav bar and the banner image on top. I've tried checking if I had some kind of padding or margins on the elements that would be causing it, but I can't identify anything wrong.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-
8"/>
<meta name="viewport" content="width=device-width, initial-
scale=1.0"/>
<title>Pierce Productions</title>
<link rel="stylesheet" href="reset.css" type="text/css"
media="screen"/>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen"/>
<script src="scripts\modernizr.min.js"></script>
<script src="scripts\respond\dest\respond.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery ||
document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min">
<\/script>')</script>
<script src="scripts\prefixfree\prefixfree.min.js"></script>
<script src="scripts\slick\slick\slick.min.js"></script>
</head>
<body>
<header>
<img src="images\banner.png" class="banner">
<nav>
<div class="color">
<div class="table">
<ul>
<li><a class="active" href="main.html">Home</a></li>
<li>Albums</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
CSS:
*Global Styles*/
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
/*Header Section*/
header {
position: relative;
width: auto;
max-width: 900px
background-color: black;
height: auto;
}
nav ul {
width: 100%;
height: 63px;
background-color: black;
list-style: none;
text-align: center;
}
nav ul li {
float: left;
padding: 0;
width: 200px;
}
nav ul li a {
width: 100%;
padding: 21.5px 0px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: Verdana, sans-serif;
text-transform: uppercase;
transition: all .25s ease;
}
nav ul li a:hover:not(.active) {
background-color: rgb(35, 35, 35);
}
nav .active {
background-color: rgb(63, 63, 63);
}
nav .table {
display: table;
margin: 0 auto;
}
nav .color {
background-color: black;
}
nav li a, nav li {
display: inline-block;
}
.banner {
width: 100%;
}
How can I get the navbar to be flush with the banner image?
.banner {
width: 100%;
display: block;
}
Try adding vertical-align: middle to your image in css, it should fix your problem.
I have successfully created a responsive Navigation bar but made the drop down menu as-well but when there is A div the drop down menu go under the content any one know what can I do please thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mac gallery</title>
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/gallerystyles.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="js/nav.js"></script>
<script src="js/javascript.js"></script>
<script src="js/footer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/galleria/galleria-1.5.7.min.js"></script>
<style>
.galleria{ max-width: 700px; height: 400px; background: #000 }
</style>
<script>
(function() {
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
}());
</script>
</head>
<body onload="time()">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<div class="dropdown">
<li class="dropbtn" onclick="myFunction1()">Gallerys</li>
<div class="dropdown-content" id="myDropdown">
<li>Iphone Gallery</li>
<li>Mac Gallery</li>
<li>Ipad Gallery</li>
</div>
</div>
<li>Contact US</li>
<li>☰</li>
</ul>
</nav>
<div class="galleria">
<img src="img/macgallery/Imac.jpg">
<img src="img/macgallery/macbook.png">
<img src="img/macgallery/macbookpro.jpg">
<img src="img/macgallery/macmini.jpg">
</div>
<footer>
<p>Develop and maintain by Alastair Micallef (<span id="date"></span>)</p>
<ul class="footernav">
<li>Home</li>
<li>Gallery</li>
<li>Iphone gallery</li>
<li>Mac gallery</li>
<li>Ipad gallery</li>
<li>Iphone History</li>
<li>Mac Hostory</li>
<li>Ipod Histry</li>
</ul>
</footer>
</body>
</html>
CSS
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
position: absolute;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
display: none;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
li{
list-style: none;
}
put all your code to website. provided code isn't suffiecient
Trying to remove the whitespace under my navigation bar, when you inspect element and disable overflow: hidden the whitespace disappears?
https://i.gyazo.com/b2f412e61b09f24348a02fd5b7d4bdf3.png > with overflow
https://i.gyazo.com/cbd9766f50c97a732064133a8a77e25a.png > without
Naturally it also removed the background color so I'd like to find another fix for this problem?
body {
font-family: 'Oxygen', sans-serif;
width: 100%;
height: 100%;
margin: 0;
background-color: #EEEEE7;
}
h1 {
font-family: 'Oxygen', sans-serif;
}
button {
color: #FE5B3C;
background-color: #2B211F;
border: none;
padding: 10px;
text-align: center;
font-size: 24px;
}
/* The dividers */
#wrapper {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
margin: 0;
background: url('images/studying.jpg');
background-size: cover;
background-position: 0;
margin-top: 0;
clear: both;
}
.container h1, p {
color: #FE5B3C;
text-align: center;
padding: .5em;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
margin-bottom: 0;
padding: 0;
overflow: hidden;
white-space: no wrap;
background-color: #2B211F;
width: 100%;
}
.img-topnav {
display: block;
margin: 0;
padding: 1em;
height: 32px;
width: auto;
max-width: 100%;
float: left;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #FE5B3C;
text-align: center;
padding: 22px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
margin: 0;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #EEEEE7;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
and html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>Your Landing Page!</title>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT -->
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- Scripts -->
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<!-- Favicon / How to Edit: Make sure the type="" is the right type. Then change the href="" to the path of the image/.ico file you'd like to use. -->
<link rel="icon" type="image/png" href="images/icons/mortarboard.png">
</head>
<body>
<div id="wrapper">
<ul class="topnav">
<li><img src="images/icons/medal.png" class="img-topnav" alt="Home">Personal Tutors</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">☰</li>
</ul>
<div class="container">
<h1>Welcome to Personal Tutors!</h1>
<button>Find a Tutor!</button>
<p> This is a test to see if the font is working. </p>
<div>
</div>
</body>
</html>
The problem has nothing to do with the overflow property. The whitespace is actually the top margin of the h1 tag.
An easy and quick fix would be to replace the h1 margin top with padding.
Try to add this to you code:
.container h1 {
margin-top: 0;
padding-top: 1em;
}