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%; } }
I am using CSS to make drop-down menu. When I resized the page, the drop-down menu didn't work. It didn't do anything when I click on the menu. Also I would like to know that when I resize my page, the About menu from the nav bar does not show after resizing. I do not know how to fix the size when I resize the page.
This is my first time using CSS and HTML. I would love to learn from you guys here.
This is my HTML code
<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link href="css/pj2.css" rel="stylesheet" type"text/css">
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset= "UTF-8">
<title>KeeNok</title>
</head>
<body>
<div class="wrap">
<!--Responsive menu-->
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Events
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Past Events
Future Events
</div>
</div>
About
☰
</div>
<!--Menu-->
<div id="main_menu">
<div class="logo_area">
<img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\graphics\KeeNokLogo.jpg" alt="logo">
</div>
<div class="inner_main_menu">
<ul id="menu">
<li>Events
<ul>
<li>Past Events</li>
<li>Future Events</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
<!--Popup Photos-->
<div class="thumbs">
<div id="Mian Kham" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Mian Kham.png" alt="Mian Kham"></div>
<div id="Gai Tod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Gai Tod.png" alt="Gai Tod"></div>
<div id="Tom Khao Pod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Tom Khao Pod.png" alt="Tom Khao Pod"></div>
</div>
<footer></footer>
</div>
</body
This is my CSS code
body {
margin: auto;
background: rgba(255, 255, 255, 0.945);
font-family: 'Ubuntu', sans-serif;
overflow: auto;
height:100%;
}
.wrap {
position: fixed;
top: 0;
left: 0;
border: 20px solid #9fd7fd;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.inner_main_menu {
margin: 0 auto;
width: 1300px;
}
.inner_main_menu ul{
margin: 60px;
padding: 0;
list-style: none;
text-align: right;
padding-top: 30px;
z-index: 1;
}
.inner_main_menu ul li{
float: none;
display: inline-block;
position: relative;
}
.inner_main_menu ul li:nth-child(1){
float: left;
}
.inner_main_menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
}
.inner_main_menu ul li a:hover {
color: #eb3332;
}
.inner_main_menu ul li ul {
position: absolute;
top: 40px;
left: 0;
width: 200px;
padding: 0;
display: none;
margin: 0;
}
.inner_main_menu ul li:hover ul {
display: block;
}
.inner_main_menu ul li ul li{
float: left;
}
.inner_main_menu ul li ul li a{
font-size: 15px;
}
#main_menu {
width: 100%;
position: relative;
}
.logo_area img{
max-width: 300px;
position: absolute;
left: 50%;
top: 0;
content: " ";
margin-left: -150px;
text-align: center;
}
#main_menu:after {
content: "";
display: table;
clear: both;
}
.thumbs {
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.thumbs img{
max-width: 300px;
}
.topnav {
background-color:#555d61;
overflow: hidden;
}
.topnav a {
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.active {
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
padding: 14px 16px;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#555d61;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropbtn {
background-color: #aaadad;
color: black;
}
.dropdown-content a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropdown-content {
display:block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
This is how my page look like before resizing
This is my page looks like after resizing
I see in your CSS that there's a comment which reads:
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon
I think you are missing the JavaScript you need to add the class to your navigation.
It will look something like this:
const icon = document.querySelector(".icon")
const nav = document.querySelector(".topnav")
icon.onclick = function() {
nav.classList.toggle('responsive');
}
I have to put a respnsive menu with submenus.
I found this lesson : https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
The menu itself comes out, but when I click the "Dropdown" button, the submenus are not displayed at all.I tried to change some code but nothing get.
How can I fix this or where to look for the problem?
Thanks in advance!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#navbaronder {
background-color: #dddddd;
margin: 155px 0px 0px 0px; /* viso4ina na drop down menuto*/
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 500;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
<div id="navbaronder">
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
</div>
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
Well I would like to align the content of the list to the bottom so they would align with eachother in a neatly way or if you guys got a other way to do it I would appreciate that to.
.container-fluid {
padding-right: 0px !important;
padding-left: 0px !important;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: right;
}
ul.topnav li a {
padding-top: 39px;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {
background-color: #555;
}
ul.topnav li.icon {
display: none;
}
#media screen and (max-width:768px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:768px) {
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;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container-fluid">
<header>
<ul class="topnav" id="myTopnav">
<li class="pull-left"><a><h1>Logo-Text</h1></a></li>
<li>Home</li>
<li>News</li>
<li>Find us</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</header>
</div>
.container-fluid {
padding-right: 0px !important;
padding-left: 0px !important;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: right;
padding-bottom: 5px;
}
ul.topnav li {
border-bottom: 1px solid #ffffff;
display: inline-block;
vertical-align: bottom;
}
ul.topnav li a {
padding-top: 39px;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
line-height: 1;
}
ul.topnav li a h1{
margin: 0;
}
ul.topnav li a:hover {
background-color: #555;
}
ul.topnav li.icon {
display: none;
}
#media screen and (max-width:768px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:768px) {
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;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container-fluid">
<header>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Find us</li>
<li>About</li>
<li class="icon">
☰
</li>
<li><a><h1>Logo-Text</h1></a></li>
</ul>
</header>
</div>
I just remove floating from li. ul will be text-align: right; then
li{
display: inline-block;
vertical-align: bottom;
}
It will make your list item bottom align. Hope this help.