Can anyone help me fix my responsive navigation. What CSS do I need to make the sub nav scroll down in mobile mode. Also the animation makes the nav hard to click on and when I resize the page the navigation does not return to its correct position. Help me please.
https://codepen.io/patriciaworth/pen/OJRBEbX
HTML
<html>
<head>
<link rel="stylesheet" href="sub-nav.css">
<!--Jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="nav-container">
<nav>
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Hosts</li>
<li>Membership</li>
<li>Affiliations</li>
<!--dropdown-->
<li class="dropdown"><span class="sub-link">Shop</span>
<ul>
<li>Products</li>
<li>My Account</li>
<li>Cart</li>
<li>Checkout</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
<div class="mobile-toggle">☰</div>
</div>
</nav>
<div class="nav-underline"></div>
</div>
<!--mobile nav toggle-->
<script>
$(document).ready(function(){
//mobile nav click event
$(".mobile-toggle").click(function(){
$(".menu").slideToggle();
});
$(".dropdown").click(function(){
$(".dropdown ul").slideToggle();
});
});
</script>
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
text-decoration: none; }
.container {
min-width: 360px;
max-width: 1080px; }
.nav-container {
width: 100%;
background: #183153;
background-image: linear-gradient(to right, #183153, #2e5d9e, #2e5d9e, #6190d1);
position: relative;
z-index: 10; }
.nav-underline {
height: 4px;
background-image: linear-gradient(to right, #ffcb05, #ffcb05, #ffe066);
animation-name: underlineToRight;
animation-duration: 4s;
animation-timing-function: ease-in;
position: relative;
z-index: 11; }
#keyframes underlineToRight {
from {
width: 0; }
to {
width: 100%; } }
nav ul {
font-family: "Dosis", sans-serif;
font-size: 16px;
line-height: 25px;
margin: 0;
padding: 0;
list-style: none;
position: relative; }
#media only screen and (max-width: 1024px) {
nav ul {
position: absolute;
top: 74px;
left: 0px;
background: #2e5d9e;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none; } }
nav ul > li {
display: inline-block; }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
text-align: center; } }
nav ul > li > ul {
display: none;
position: absolute;
width: 160px;
background: #2e5d9e; }
#media only screen and (max-width: 1024px) {
nav ul > li > ul {
width: 100%;
position: relative; } }
nav ul > li > ul > li {
width: 100%; }
nav ul > li:hover ul {
display: block; }
#media only screen and (max-width: 1024px) {
nav ul > li:hover ul {
display: none;
width: 100%; } }
nav ul li a,
nav .sub-link {
color: #ffffff;
display: block;
text-decoration: none;
padding: 15px;
box-sizing: border-box;
text-transform: uppercase;
transition: 0.3s;
cursor: pointer; }
nav ul li a:hover,
nav .sub-link:hover {
background: #c6c6cc;
color: #183153; }
#media only screen and (max-width: 1366px) {
nav ul li a,
nav .sub-link {
font-size: 14px; } }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
border-bottom: 1px solid rgba(204, 204, 204, 0.3); } }
nav .mobile-toggle {
color: #fff;
padding: 25px 0px;
text-align: right;
right: 20px;
display: none;
cursor: pointer;
position: relative; }
#media only screen and (max-width: 1024px) {
nav .mobile-toggle {
display: block;
width: 100%; } }
Ok after much deliberation I have found an answer. See here:
https://codepen.io/patriciaworth/pen/rNMQyVx
HTML
<html>
<head>
<link rel="stylesheet" href="sub-nav.css">
<!--Jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="nav-container">
<nav>
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Hosts</li>
<li>Membership</li>
<li>Affiliations</li>
<!--dropdown-->
<li class="dropdown"><span class="sub-link">Shop</span>
<ul>
<li>Products</li>
<li>My Account</li>
<li>Cart</li>
<li>Checkout</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
<div class="mobile-toggle">☰</div>
</div>
</nav>
<div class="nav-underline"></div>
</div>
<!--mobile nav toggle-->
<script>
$(document).ready(function(){
//mobile nav click event
$(".mobile-toggle").click(function(){
$(".menu").slideToggle();
});
$(".dropdown").click(function(){
$(".dropdown ul").slideToggle();
});
//window resize event
$(window).resize(function(){
var w = $(window).width();
if(w > 1024 && $('.menu').is(':hidden'))
{
$('.menu').removeAttr('style');
}
});
});
</script>
</body>
</html>
SCSS
//breakpoints
$mega: 1920px;
$xlarge: 1680px;
$large: 1366px;
$med: 1024px;
$tiny: 768px;
//colors
$blue: #183153;
$blue2: #2e5d9e;
$blue3: #6190d1;
$light-blue: #336699;
$yellow: #ffcb05;
$yellow2: #ffe066;
$light-grey: #90909c;
$med-grey: #434343;
$dark-grey: #363636;
$white: #ffffff;
//fonts
#import url('https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap');
$heading-font: 'Dosis', sans-serif;
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
$page-font: 'Titillium Web', sans-serif;
#import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#300;400;500;600;700;800;900&display=swap');
$cursive: 'Sansita Swashed', cursive;
*
{
margin:0;
padding: 0;
text-decoration: none;
}
.container
{
min-width: 360px;
max-width: 1080px;
}
.nav-container
{
width: 100%;
background: $blue;
background-image: linear-gradient(to right, $blue, $blue2, $blue2, $blue3);
position: relative;
z-index: 10;
}
//animation
.nav-underline
{
height: 4px;
//background: $yellow;
background-image: linear-gradient(to right, $yellow, $yellow, $yellow2);
animation-name: underlineToRight;
animation-duration: 4s;
animation-timing-function: ease-in;
position: relative;
z-index: 11;
}
#keyframes underlineToRight
{
from
{
width: 0;
}
to
{
width: 100%;
}
}
nav
{
//top ul
.menu
{
font-family: $heading-font;
font-size: 16px;
line-height: 25px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
#media only screen and (max-width: $med)
{
position: absolute;
top: 74px;
left: 0px;
background: $blue2;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
}
}
//nav items
ul>li
{
display: inline-block;
position: relative;
#media only screen and (max-width: $med)
{
display: block;
width: 100%;
text-align: center;
}
}
//dropdown
ul>li>ul
{
display: none;
position: absolute;
width: 160px;
background: #333;
#media only screen and (max-width: $med)
{
width: 100%;
position: relative;
}
}
//dropdown items
ul>li>ul>li
{
width: 100%;
}
//top nav links
a,
.sub-link
{
display: block;
text-decoration: none;
padding: 15px;
box-sizing: border-box;
text-transform: uppercase;
transition: 0.3s;
cursor: pointer;
#media only screen and (max-width: $large)
{
font-size: 14px;
}
}
//top nav link color
.menu>li>a,
.sub-link
{
color: $white;
&:hover
{
background: lighten($light-grey, 20%);
color: $blue;
}
}
//show arrow icon so user knows to click for dropdown
.sub-link:after
{
content:" \25BC";
}
//dropdown link color
.dropdown>ul>li>a
{
color: #fff;
&:hover
{
background: #ccc;
color: $blue2;
}
}
//mobile item display
ul>li
{
#media only screen and (max-width: $med)
{
display: block;
width: 100%;
border-bottom: 1px solid rgba(204, 204, 204, 0.3);
}
}
//mobile icon
.mobile-toggle
{
color: #fff;
padding: 25px 0px;
text-align: right;
right: 20px;
display: none;
cursor: pointer;
position: relative;
#media only screen and (max-width: $med)
{
display: block;
width: 100%;
}
}
}
CSS
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
text-decoration: none; }
.container {
min-width: 360px;
max-width: 1080px; }
.nav-container {
width: 100%;
background: #183153;
background-image: linear-gradient(to right, #183153, #2e5d9e, #2e5d9e, #6190d1);
position: relative;
z-index: 10; }
.nav-underline {
height: 4px;
background-image: linear-gradient(to right, #ffcb05, #ffcb05, #ffe066);
animation-name: underlineToRight;
animation-duration: 4s;
animation-timing-function: ease-in;
position: relative;
z-index: 11; }
#keyframes underlineToRight {
from {
width: 0; }
to {
width: 100%; } }
nav .menu {
font-family: "Dosis", sans-serif;
font-size: 16px;
line-height: 25px;
margin: 0;
padding: 0;
list-style: none;
position: relative; }
#media only screen and (max-width: 1024px) {
nav .menu {
position: absolute;
top: 74px;
left: 0px;
background: #2e5d9e;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none; } }
nav ul > li {
display: inline-block;
position: relative; }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
text-align: center; } }
nav ul > li > ul {
display: none;
position: absolute;
width: 160px;
background: #333; }
#media only screen and (max-width: 1024px) {
nav ul > li > ul {
width: 100%;
position: relative; } }
nav ul > li > ul > li {
width: 100%; }
nav a,
nav .sub-link {
display: block;
text-decoration: none;
padding: 15px;
box-sizing: border-box;
text-transform: uppercase;
transition: 0.3s;
cursor: pointer; }
#media only screen and (max-width: 1366px) {
nav a,
nav .sub-link {
font-size: 14px; } }
nav .menu > li > a,
nav .sub-link {
color: #ffffff; }
nav .menu > li > a:hover,
nav .sub-link:hover {
background: #c6c6cc;
color: #183153; }
nav .sub-link:after {
content: " \25BC"; }
nav .dropdown > ul > li > a {
color: #fff; }
nav .dropdown > ul > li > a:hover {
background: #ccc;
color: #2e5d9e; }
#media only screen and (max-width: 1024px) {
nav ul > li {
display: block;
width: 100%;
border-bottom: 1px solid rgba(204, 204, 204, 0.3); } }
nav .mobile-toggle {
color: #fff;
padding: 25px 0px;
text-align: right;
right: 20px;
display: none;
cursor: pointer;
position: relative; }
#media only screen and (max-width: 1024px) {
nav .mobile-toggle {
display: block;
width: 100%; } }
Related
This is my first website and i'm doing it for a project at school nut i've got a couple of problems. First, when resizing my website one of my buttons starts to disappear for some reason. Secondly, my background color disappears when going below 992px of width. This project is due this week and this is the last part. Anyways, here is my code, the classes, ids and text are in french but the actual code is in english.The image that doesn't appear is supposed to be 2000px by 391px
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--ming: #16697A;
--pacific-blue: #489FB5;
--middle-blue: #82C0CC;
--isabelline: #EDE7E3;
--orange-peel: #FFA62B;
--white: #FFFFFF;
--black: #000000;
}
* {
box-sizing: border-box;
}
html {
font: 400 100%/150% Montserrat, Arial, Helvetica, sans-serif;
color: var(--white);
}
#media screen and (min-width:768px) {
html {
font-size: 100%;
line-height: 150%;
}
}
body {
margin: 0;
}
#entete,
#pied-page {
background: var(--pacific-blue);
color: var(--white);
}
#entete {
padding: 5%;
}
#media screen and (min-width:768px) {
#entete {
padding: 5% 5% 0;
}
}
#media screen and (min-width:992px) {
#entete {
position: sticky;
top: 0;
left: 0;
z-index: 2;
padding: 0;
}
}
#media screen and (min-width:992px) {
.wrapper-navigation {
display: flex;
align-items: flex-end;
max-width: 1400px;
margin: 0 auto;
}
#logo,
#menu {
flex: 0 0 50%;
}
#logo {
padding: 3% 0% 3% 5%;
}
}
#pied-page * {
color: white;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
margin-top: 1rem;
}
#menu ul li a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: .5rem 1rem;
border-bottom: 0.063rem solid #fff;
font-weight: 600;
transition: all .3s ease;
}
#menu ul li a:hover,
#menu ul li a:focus {
color: rgba(255, 255, 255, .5);
}
#menu ul li a span {
font-weight: 400;
}
#menu ul li:last-child a {
border-bottom: none;
}
#media screen and (min-width:768px) {
#menu ul {
display: flex;
}
#menu ul li {
padding-top: .5rem;
}
#menu ul li a {
border-bottom: none;
line-height: 1.125rem;
}
#menu ul li a span {
display: block;
}
#menu ul li.active {
background: white;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#menu ul li.active a {
color: var(--pacific-blue);
}
}
<header id="entete">
<div class="wrapper-navigation">
<div id="logo">
<img src="images-meme/La culture des memes-logo.jpg">
</div>
<nav id="menu">
<ul>
<li>Introduction <span>au site</span></li>
<li><span>Doge</span> Cheems</li>
<li>Spiderman <span>meme</span></li>
<li><span>Clash</span> Royale</li>
<li class="active">Informations <span>importantes</span></li>
</ul>
</nav>
</div>
</header>
Your media queries need to have larger values.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--ming: #16697A;
--pacific-blue: #489FB5;
--middle-blue: #82C0CC;
--isabelline: #EDE7E3;
--orange-peel: #FFA62B;
--white: #FFFFFF;
--black: #000000;
}
* {
box-sizing: border-box;
}
html {
font: 400 100%/150% Montserrat, Arial, Helvetica, sans-serif;
color: var(--white);
}
#media screen and (min-width:1328px) {
html {
font-size: 100%;
line-height: 150%;
}
}
body {
margin: 0;
}
#entete,
#pied-page {
background: var(--pacific-blue);
color: var(--white);
}
#entete {
padding: 5%;
}
#media screen and (min-width:768px) {
#entete {
padding: 5% 5% 0;
}
}
#media screen and (min-width:1328px) {
#entete {
position: sticky;
top: 0;
left: 0;
z-index: 2;
padding: 0;
}
}
#media screen and (min-width:1328px) {
.wrapper-navigation {
display: flex;
align-items: flex-end;
max-width: 1400px;
margin: 0 auto;
}
#logo,
#menu {
flex: 0 0 50%;
}
#logo {
padding: 3% 0% 3% 5%;
}
}
#pied-page * {
color: white;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
margin-top: 1rem;
}
#menu ul li a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: .5rem 1rem;
border-bottom: 0.063rem solid #fff;
font-weight: 600;
transition: all .3s ease;
}
#menu ul li a:hover,
#menu ul li a:focus {
color: rgba(255, 255, 255, .5);
}
#menu ul li a span {
font-weight: 400;
}
#menu ul li:last-child a {
border-bottom: none;
}
#media screen and (min-width:768px) {
#menu ul {
display: flex;
}
#menu ul li {
padding-top: .5rem;
}
#menu ul li a {
border-bottom: none;
line-height: 1.125rem;
}
#menu ul li a span {
display: block;
}
#menu ul li.active {
background: white;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#menu ul li.active a {
color: var(--pacific-blue);
}
}
<header id="entete">
<div class="wrapper-navigation">
<div id="logo">
<img src="images-meme/La culture des memes-logo.jpg">
</div>
<nav id="menu">
<ul>
<li>Introduction <span>au site</span></li>
<li><span>Doge</span> Cheems</li>
<li>Spiderman <span>meme</span></li>
<li><span>Clash</span> Royale</li>
<li class="active">Informations <span>importantes</span></li>
</ul>
</nav>
</div>
</header>
I have this navbar setup on my page, I would like for it to work as normal on a tablet or desktop and then when loaded on a mobile device for the navbar to be condesnsed into a pressable hamburger menu.
What would be the best way to tackle this?
HTML and CSS Code are as follows
HTML
<h1 class='logo'><a href='#'>Website Logo</a></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</nav>
</header>
CSS
header{
display: flex;
justify-content: space-around;
width: 100%;
background: #616880;
height: 70px;
}
.sticky {
position: fixed;
top:0;
width: 100%;
}
.logo{
margin: 15px 0 0 0;
}
nav {
margin: 25px;
}
ul li{
list-style: none;
display: inline;
}
ul li a,
h1 a{
text-decoration: none;
color: #fff;
padding: 5px;
}
Solution 1 Using pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</header>
Solution 2 Using JS and CSS
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Eric Samson
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
GIS Projects
</li>
<li>
R Studio
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
</section>
NOTE: View Snippet in full screen
You can use javascript. For better understanding, you can look at this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Also you can use jquery too.
I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>
Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example
Here is the deal. I'm trying to create a mobile first navigation bar using css3, html5 and transition properties. I've been successful so far but I am unable to control the transition for when I resize the window (using media queries min-width) from desktop view to mobile view. I've add a Toggle button in the mobile view to create a burger menu that disappears at 600px and vice versa. when the button is unchecked (menu not visible) and I resize the view from desktop to mobile there is a very fast transition that I don't want. I've tried so far so many variants and nothing seems to work. Any suggestion would be greatly appreciated!
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header {
display: block;
background-color: #FFF;
height: inherit;
}
nav {
text-align: center;
line-height: 3.5em;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: inherit;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: #ededed;
}
nav ul li a {
text-decoration: none;
color: #313131;
}
nav ul li a:hover {
color: #b9b5b5;
}
#menuToggle {
display: none;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
transition: all 300ms ease-in-out;
}
.menu-icon {
float: right;
color: #2f2f2f;
cursor: pointer;
padding-top: 0.46em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.46em;
text-decoration: none;
font-size: 30px;
}
.menu {
max-height: 0;
transition-property: max-height 0s ease-in-out;
overflow: hidden;
}
#menuToggle:checked ~ header .menu {
max-height: 300px;
transition-property: all 0.6s ease-in-out;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
height: inherit;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
position: relative;
top: -70px;
height: 100%;
max-height: 100%;
transition-property: none;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
background-color: #FFF;
display: block;
float: right;
padding: 0.55em 2em 0 0;
height: inherit;
}
nav ul li {
display: inline-flex;
}
nav ul li:hover {
background-color: #FFF;
}
nav ul li a {
padding: 0 2em;
}
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header class="header">
<div id="logo">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
Put everything you only want to happen on the small screen inside:
#media screen and (max-width:599px) {
}
And everything you only want to happen on the large screen inside your:
#media screen and (min-width:600px) {
}
This question already has answers here:
Dropdown list alignment issue (HTML/CSS)
(3 answers)
Closed 7 years ago.
I've asked a question like this before, but received no answers. This is important, as it is an integral part of my website.
I am trying to create a dropdown menu. The 'Team' and 'News' links (when you hover over them) are the issue. I want the links beneath them to be in line with their parent.
I've tried to resolve the issue with padding, but have gotten nowhere.
Please help.
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
If I understood correctly, this should help:
ul ul {
padding: 0;
}
I think it will helps you,
HTML
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
css
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width: 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width: 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width: 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav > ul > li > ul {
padding: 0;
}
nav > ul > li > ul li a {
border: 0;
text-align: left;
width: 100%;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
You're missing
nav ul ul li { padding: 0; }