I have a transition that animates the height of the UL within my navigation. This is only for mobiles. I have used a media query to change the navigation when the viewport is wider.
When you make the viewport smaller in width, once the media query is triggered you can see that the UL height animates because I have a transition going on. The only two ways I've found that stop this are either lose the transition completely, or only have it so the transition happens when the checkbox is checked. Initially displaying the UL as none worked, however as I need to then set the display to block, the transition is lost.
Here is my code example. Hopefully someone can help with a workaround.
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,500,700|Ovo|Varela' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Navigation -->
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox" autocomplete="off">
<nav>
<div id="nav_overlay"></div>
<ul>
<li>Home</li>
<li>My Work</li>
<li>Contact</li>
</ul>
<div class="navbar_handle">
<label for="navbar-checkbox" class="navbar_menu"></label>
</div>
</nav>
</body>
</html>
CSS:
a {
text-decoration: none;
color: inherit;
}
.navbar-checkbox {
display: none;
}
nav {
position: fixed;
width: 100%;
top: 0;
}
nav ul {
position: relative;
-webkit-transition: height .2s linear;
transition: height .2s linear;
height: 0;
background-color: #2b2b2b;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
z-index: 3;
}
nav li {
-webkit-transition: visibility .4s linear;
transition: visibility .4s linear;
visibility: hidden;
}
nav li:hover {
background-color: #0b0b0b;
}
nav li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: block;
padding: 1.25em;
}
nav .border {
border-bottom: 1px solid #f6f6f6;
}
nav .navbar_handle {
position: relative;
border-top: 4px solid #de1b1b;
width: 100%;
background: #f6f6f6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
z-index: 3;
}
nav .navbar_handle .navbar_menu {
font-family: dan_custom-font;
width: auto;
height: 100%;
float: right;
padding: 10px;
margin-right: 0.5em;
cursor: pointer;
color: #de1b1b;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s;
}
nav .navbar_handle .navbar_menu:before {
content: 'Menu';
font-size: 2em;
line-height: 1em;
}
nav .navbar_handle .navbar_menu:after {
display: none;
}
nav #nav_overlay {
width: 100%;
height: 100%;
position: fixed;
visibility: hidden;
background: #000;
opacity: 0;
-webkit-transition: all .4s;
transition: all .4s;
z-index: 2;
}
#navbar-checkbox:checked + nav ul {
height: 12.1875em;
}
#navbar-checkbox:checked + nav li {
visibility: visible;
width: 100%;
display: block;
}
#navbar-checkbox:checked + nav #nav_overlay {
visibility: visible;
opacity: .7;
}
#navbar-checkbox:checked + nav .navbar_menu:before {
display: none;
}
#navbar-checkbox:checked + nav .navbar_menu:after {
display: block;
content: 'Close';
font-size: 2em;
line-height: 1em;
}
.main {
line-height: 1.5em;
}
#media only screen and (min-width: 42em) {
nav {
background: #f6f6f6;
}
nav ul {
display: block;
background: none;
float: right;
height: 3.75em;
color: #2b2b2b;
-webkit-transition: none;
transition: none;
}
nav ul li {
visibility: visible;
display: inline-block;
-webkit-transition: none;
transition: none;
}
nav .navbar_handle {
display: none;
}
nav .border {
border-bottom: none;
}
}
Related
I want to make a responsive navigation on my website.
i didn't use a grid
I tried
#media screen and (max-width: 600px) {
.menu{
height: 100%;
width: 15px;
float: top;
}}
but that don't work
I want it to get on the top of my website
So some suggestions:
Send the html code or jsut some of it.
You can also try adding margin: 0; to the body:
body{
margin: 0;
}
You will also need to add a background - color:
.menu {
background-color: red;
}
And more stuff could be added but you can check this:
https://www.w3schools.com/howto/howto_css_style_header.asp
This helps a lot
You can use this codepen which I had made yesterday or may be before that, I don't remember :-
https://codepen.io/CodingPencil/pen/abEWzXp
Or just copy my code here :-
HTML -
<nav>
<div>
Something
</div>
<div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu" id="menu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
CSS -
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--nav-bg: #03000e;
--main-clr: dodgerblue;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
width: 100%;
background: #03000e;
}
nav .logo {
color: #fff;
text-decoration-color: var(--main-clr);
font-size: 22px;
font-family: "Playfair Display", serif;
font-weight: 100;
}
nav ul {
--padding: 20px;
--font-size: 17px;
list-style: none;
display: flex;
align-items: center;
font-size: var(--font-size);
overflow-y: hidden;
transition: 1s ease;
}
nav ul li {
padding: var(--padding);
}
nav ul li a {
color: #fff;
text-decoration: none;
position: relative;
}
nav ul li a::after {
content: "";
width: 0%;
height: 2.5px;
border-radius: 99px;
background: var(--main-clr);
position: absolute;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
nav .menu {
width: 22px;
height: 16px;
cursor: pointer;
display: none;
align-items: center;
flex-direction: column;
justify-content: space-between;
position: relative;
margin: 20px;
}
nav .menu span {
width: 100%;
height: 2px;
border-radius: 99px;
background: #fff;
transition: 0.3s ease;
transform-origin: left;
}
nav .menu.active span {
background: var(--main-clr);
}
nav .menu.active span:nth-child(1) {
transform: rotate(40deg);
}
nav .menu span:nth-child(3) {
transform-origin: left;
}
nav .menu.active span:nth-child(3) {
transform: rotate(-40deg);
}
nav .menu.active span:nth-child(2) {
transform: scale(0);
}
#media (max-width: 910px) {
nav .menu {
display: flex;
}
nav ul {
--height: 0px;
flex-direction: column;
background: var(--nav-bg);
position: absolute;
width: 100%;
left: 0;
top: 56px;
height: var(--height);
transition: 1s ease;
}
nav ul.active {
--height: calc(
(((var(--padding) * 2) + (var(--font-size) * 1.5))) * var(--childenNumber)
);
transition: 1s ease;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
width: 100%;
text-transform: capitalize;
}
}
And the JAVASCRIPT -
const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");
menu.addEventListener("click", () => {
navigation.style.setProperty("--childenNumber", navigation.children.length);
navigation.classList.toggle("active");
menu.classList.toggle("active");
});
There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc.
try below one,
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
References:
https://getbootstrap.com/docs/5.0/components/navbar/
https://www.w3schools.com/css/css_navbar.asp
Note: float:top is not working
I have a pure css hamburger menu based on this codepen and I made my hamburger menu only show up on devices with 768px width and below, the hamburger menu also has some transitions when opening and closing to make it look smooth but the problem is that when the page is refreshed, you can see the menu show up for a split second before it transitions under the header. This can also be seen when you're manually resizing the viewport from a width larger than 768px and when it gets to 767px, you can the see the menu appear for a split second before it disappears. Please I need help to make this behaviour stop. Below is the code required to recreate this problem:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
</body>
</html>
I also provided a fiddle you can use to check out the problem.
P.S: The original codepen I got the idea from also has the same issue if you copy the code and preview it in a browser and reload the page.
Using javascript we can add the stop-transition class to the body for some few milliseconds. Then in the css we can add the rule to stop play any transition momentarily. After that, when the resize is done, we can remove the stop-transition class from the body to make sure that everything acts accordingly.
Here's the fiddle.
(function () {
const classes = document.body.classList;
let timer = null;
window.addEventListener('resize', function () {
if (timer){
clearTimeout(timer);
timer = null;
} else {
classes.add('stop-transition');
}
timer = setTimeout(() => {
classes.remove('stop-transition');
timer = null;
}, 100);
});
})();
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
/* Stop playing transition momentarily on viewport resize. */
body.stop-transition .menu {
transition: none;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
Description: I have a responsive navbar which is opening and closing perfectly fine.
Problem: When I click on a link, It doesn't close itself. I have to manually close it.
Kindly find the codebase below:
navbar.component.html
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<div class="header header-fixed">
<div class="navbar container">
<div class="logo">
<div class="logo">REYA</div>
</div>
<input type="checkbox" id="navbar-toggle">
<label for="navbar-toggle"><i></i></label>
<nav class="menu">
<ul>
<li><a (click)="goToHome('home')">Home</a></li>
<li><a (click)="goToBlogs('more-blogs')">Blogs</a></li>
<li><a (click)="goToServices('services')">Services</a></li>
<li><a (click)="goToContact('contact')">Contact</a></li>
<li><a>Login</a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<router-outlet></router-outlet>
navbar.component.css
body {
margin: 0;
}
.header-fixed {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #242424;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
line-height: 60px;
}
.navbar .logo {
height: 80px;
}
.navbar .logo:hover {
color: #777777;
}
.navbar nav {
flex: 8;
}
.navbar label {
user-select: none;
cursor: pointer;
padding: 28px 20px;
position: relative;
z-index: 3;
}
.navbar label i {
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
font-style: normal;
font-weight: normal;
}
.navbar label i:before,
.navbar label i:after {
content: '';
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navbar label i,
.navbar label i:before,
.navbar label i:after {
display: block;
background: #eee;
}
.navbar label i:before {
top: 5px;
}
.navbar label i:after {
top: -5px;
}
.navbar #navbar-toggle {
display: none;
}
.header #navbar-toggle:checked~.menu {
visibility: visible;
opacity: 0.99;
}
.header #navbar-toggle:checked~label {
background: #212121;
border-radius: 50%;
}
.header #navbar-toggle:checked~label i {
background: transparent;
}
.header #navbar-toggle:checked~label i:before {
transform: rotate(-45deg);
}
.header #navbar-toggle:checked~label i:after {
transform: rotate(45deg);
}
.header #navbar-toggle:checked~label:not(.steps) i:before,
.header #navbar-toggle:checked~label:not(.steps) i:after {
top: 0;
}
#media (max-width: 768px) {
.navbar nav {
visibility: hidden;
opacity: 0;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
display: table;
background: #ddd;
}
.navbar nav ul {
margin: 0;
padding: 20px 0;
display: table-cell;
vertical-align: middle;
}
.navbar nav li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.navbar nav li:hover {
background: #525151;
}
.navbar nav li:hover a {
color: #fff;
transition: all 0.3s ease-out;
}
.navbar nav li a {
color: #212121;
}
}
#media (min-width: 768px) {
.navbar nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
text-align: center;
list-style: none;
}
.navbar nav li {
flex: 1;
}
.navbar nav li a {
display: block;
padding: 0 8px;
font-size: 16px;
line-height: 60px;
color: #fff;
text-decoration: none;
}
.navbar nav li.active {
background: #555;
}
.navbar nav li:hover {
background: #333;
}
.navbar label {
display: none;
}
}
.navbar .logo {
flex: 3;
}
.navbar .logo a {
display: block;
font-size: 30px;
font-weight: bold;
color: #fff;
text-decoration: none;
margin-left: 20px;
margin-top: 10px;
}
.navbar .logo a:hover {
color: #4d4c4c;
transition: .2s;
}
I have tried many options including:
Commenting out most of the lines
Removing the media queries
Removing the click event
Nothing is working! Can somebody please help me?
I'm not sure how you implemented your JS functions, but I think I would simulate a click on the navbar toggler or just make a function called whenever the user navigates, that makes sure the navbar is closed after navigation.
This question already has answers here:
How to remove white space left and right side of page?
(10 answers)
Closed 5 years ago.
My Nav bar isn't spanning the whole page (run the snippet code to see). As you can see, there are white borders on the left and right side. Here is the code:
nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}
li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}
ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}
.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}
.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
color: #6d9dc5;
}
.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Bagles
<li>
</ul>
</div>
<li class="buttons">About Us</li>
<li class="buttons">Contact Us</li>
</ul>
</nav>
</body>
Every single thing that pertains to the nav bar is set on width: 100%. Please help me understand why the nav bar isn't filling the whole width of the page.
The CSS below should prevent the white spacing around your Nav bar
body {
margin: 0;
padding: 0;
}
every tag has some default margin and padding at first you have to clear that margin and padding using *{ padding:0px; margin:0px} that * select all the element and set margin and padding 0.
*{
margin: 0px;
padding:0px;
}
nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}
li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}
ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}
.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}
.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
color: #6d9dc5;
}
.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Bagles
<li>
</ul>
</div>
<li class="buttons">About Us</li>
<li class="buttons">Contact Us</li>
</ul>
</nav>
The best thing to do is set your CSS like this:
body{ margin: 0; padding: 0; width: 100vw;}
nav{width: 100vw;}
Using the 100vw will set the item's to be 100% of the viewable width. This should eliminate your problem.
I would like to see my menu links.
I have implemented a CSS dropdown menu using the checkbox hack.
I have attached an icon to the bottom of the menu. When triggered, the menu drags the icon down along with it.
However, the icon's "margin" (according to dev tools) covers the entire width of the menu, such that the only way to display the links in the menu is to make the menu drop down significantly lower, changing:
#navbar-checkbox:checked + .menu ul {
max-height: 50px; ==============> 75px
z-index: 3;
}
I have tried just about everything I can think of: from z-index, to all kinds of positions, to transparent to opacity etc.
I simply want to display the links.
body {
background-color: purple;
}
.menu {
padding: 15px 15px 0px 15px;
background: transparent;
min-height: 2.75em;
line-height: 0em;
border-bottom: 1px solid white;
position: relative;
}
.logo {
color: white;
transition: 0.4s ease-in-out;
}
#logo {
background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: 80%;
display: block;
margin-top: 35px;
margin-bottom: -10px;
height: 50px;
width: 50px;
transition: 0.4s ease-in-out;
z-index: 2;
}
.logo:hover {
color: mediumturquoise;
transition: 0.4s ease;
}
.menu .logo div {
position: absolute;
width: 200px;
margin-top: -20px;
}
.logo p {
margin-left: 15px;
margin-top: 35px;
font-size: 20px;
font-weight: 800;
font-family: 'Coustard', serif;
}
.menu ul {
font-family: 'Open Sans', sans-serif;
color: white;
transition: max-height 0.4s linear 0;
margin: 0;
padding: 0;
text-align: right;
}
.menu a {
text-decoration: none;
color: white;
transition: 0.4s ease-in-out;
}
.menu a:hover {
color: black;
transition: 0.4s ease-in-out;
}
.menu li {
display: inline-block;
padding: .45em 1.1em;
}
#media(max-width:321px){
#logo {
margin-left: 5%;
}
}
#media (min-width: 0px) {
.menu ul {
max-height: 0;
overflow: hidden;
}
.menu li {
visibility: visible;
display: inline-block;
padding: 4em 0 0.5em;
border: none;
margin-right: 4px;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 50px;
z-index: 3;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: white;
}
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.6666666666666667em;
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
top: 0.37777777777777777em;
}
.navbar-handle:after {
top: 0.8888888888888888em;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: absolute;
font-size: 1.2em;
top: 1.3em;
color: white;
right: 25px;
z-index: 10;
}
.navbar-checkbox {
display: none;
}
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<a class="logo" href="http://myapp.com">
<div class="logo">
<p>myapp.com</p>
</div>
</a>
<ul>
<li>how it works
</li>
<li>about us
</li>
<li>contact
</li>
</ul>
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
</nav>
Inorder to see the links visible just try to adjust the padding of .menu li padding: 4em 0 0.6em; to padding: 2em 0 0.6em;
here are corrections:
put these before
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>
these style must be added and edited
#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}
My advice:
#navbar-checkbox:checked + .menu ul {
display: block;
}
#navbar-checkbox + .menu ul {
display: none;
}
Do not use height as parameter.