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.
Related
After nearly a week I am still struggling with toggle on navigation.
This is my current CSS, what I need to do now, is simply get the toggle to open, it did open before so something minor is stopping it now but I cant work it out. I do not really know much about CSS as I keep forgetting it, but I do not know javascript or jquery
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
``` .menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+.menu {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
Here is an example for this. You can try this code. It is fully tested. I hope it will help you. You can change colors and backgrounds as per needed in this code.
nav ul ul {
display: none;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
list-style-type: none;
}
nav li a {
text-decoration: none;
display: inline-block;
margin: 10px 20px 5px 0;
padding: 8px 10px;
}
nav li a:link, nav li a:visited {
color: #646565;
background: #e8e9eb;
}
nav li a:link:hover, nav li a:visited:hover {
color: black;
}
nav li:hover ul {
display: block;
position: absolute;
}
input.toggle,
label.toggle {
display: none;
}
label.toggle {
font-weight: 900;
font-size: 1.2em;
padding: 10px 20px;
}
#media (max-width: 960px) {
nav {
display: none;
}
input.toggle, .toggle span {
display: none;
}
input[type=checkbox]:checked ~ nav, label.toggle {
display: block;
cursor: pointer;
}
nav li {
float: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li ul {
display: block;
}
nav li ul li {
margin-left: 20px;
}
nav li a {
display: block;
margin-left: 20px;
}
}
<div class="wrapper">
<label class="toggle" for="toggle">☰ <span>Menue</span></label>
<input class="toggle" id="toggle" type="checkbox">
<nav>
<ul>
<li class="current">Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li>Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</nav>
</div>
Just change your selector from:
#toggle:checked+.menu {
display: block;
}
to:
#toggle:checked+ ul {
display: block;
}
See snippets below:
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+ul {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
I need to add a dropdown to my "contact" section and I'm wondering if anyone could help me out with it. I've tried to use: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
but with my ongoing style it is not 100% working correctly. Is there any other way I could implement a dropdown to my "contact" section without adding a "Button" property?
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop"/>
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>Contact</li>
</div>
</ul>
</nav>
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding:14px 20px;
color:black;
font-size:17px;
text-decoration:none;
border:none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
}
I think It is necessary to add button...
check my code i have done some changes for you in you code by clicking "Run code snippet" and then "view full page".
.toggle,
[id=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img {
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 20px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar 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;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding: 14px 20px;
color: black;
font-size: 17px;
text-decoration: none;
border: none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked+ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
<body>
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>
<div class="dropdown">
<button class="dropbtn">Contact
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</div>
</ul>
</nav>
</body>
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
I have a hamburger menu built in CSS but I need it to close when you click a link. It is only a 1 page site with anchor links. I have tried following other peoples problem with this but I cannot get it to work.
Navigation Links
<nav>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<ul>
<li>Services</li>
<li>About us</li>
<li>Portfolio</li>
<li><a href="/#reasons-to-choose-us">Reasons to choose us</a</li>
<li>Contact us</li>
</ul>
</nav>
CSS Desktop
nav {
float: right;
margin: 38px 0 34px 10px;
}
nav ul li {
display: inline;
}
nav ul {
clear: right;
}
nav li a {
padding: 28px 35px;
}
nav li a:focus {
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size:46px;
line-height: 70px;
float: right;
display: none;
}
#toggle {
display: none;
}
CSS Mobile
label {
display: block;
cursor: pointer;
padding-top: 7px;
}
nav li a {
padding: 15px;
display: block;
text-align: center;
border-bottom: 1px solid #eee;
}
nav {
float: none;
margin: 0;
}
nav ul li {
display: none;
}
nav ul li:hover {
background: #eee;
}
nav ul li a:focus {
background: #eee;
}
#toggle:checked + ul li {
display: block;
cursor: pointer;
}
Having limited coding experience, I am struggling a little with this one.
Thanks
answer to this question with jquery:
jsfiddle.net/a9013pLr
$(document).ready(function() {
$('#toggle').click(function() {
$('#ulul').toggleClass('open');
});
});
#media only screen and (max-width:1000px) {
label {
display: block;
cursor: pointer;
padding-top: 7px;
}
nav li a {
padding: 15px;
display: block;
text-align: center;
border-bottom: 1px solid #eee;
}
nav {
float: none;
margin: 0;
}
nav ul li {
display: none;
}
nav ul li:hover {
background: #eee;
}
nav ul li a:focus {
background: #eee;
}
#toggle {
display: block!important;
cursor: pointer;
}
}
.open {
display: none!important;
}
nav {
float: right;
margin: 38px 0 34px 10px;
}
nav ul li {
display: inline;
}
nav ul {
clear: right;
}
nav li a {
padding: 28px 35px;
}
nav li a:focus {
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size: 46px;
line-height: 70px;
float: right;
display: none;
}
#toggle {
display: none;
}
button {
width: 30px;
height: 30px;
background: green;
}
#ulul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<label for="toggle">☰</label>
<button id="toggle"></button>
<ul class="open" id="ulul">
<li>Services</li>
<li>About us</li>
<li>Portfolio</li>
<li>Reasons to choose us</li>
<li>Contact us</li>
</ul>
</nav>
Checkout This link for a better looking solution with explanation: https://www.w3schools.com/howto/howto_js_sidenav.asp
I am having problem in my responsive menu. When i click the menu navigation, all the list is show horizontal. But i want it to be vertical which means that only 1 list in 1 line. Please help me, i am new to programming
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
float: left;
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
float: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: 85px;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
float: left;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>
Set width of li to 100%
ul.topnav.responsive li {
width: 100%;
}
ul.topnav.responsive{
padding-left:0;
}
Fixed Your snippet
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
float: left;
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
float: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: 85px;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
float: left;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
ul.topnav.responsive li {
width: 100%;
display: inline-block;
}
ul.topnav.responsive{
padding-left:0;
}
ul.topnav.responsive li.icon {
width: auto;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>
You can try clearing each list item .menu ul li adding clear:both; but you really should pull the nav trigger out of the list of menu items so that you can limit the size of your ul more easily and negate the use of clears entirely.
Try and HTML architecture like this:
<div class="menu-wrap">
<a class="menu-trigger" href="#" onclick="">☰</a>
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
</ul>
</div>
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
/* height: 85px;*/
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>
<style>
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
background: none;
display: inline-block;
width: auto;
}
.menu ul.topnav.responsive li {
float: none;
width:100%;
display: inline-block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
}
.menu ul.topnav.responsive li.icon a {
float:right;
background: #016fb9;
}
.menu ul.topnav.responsive li.icon a:hover {
color:#fff;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: auto;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
display:inline-block;
width:100%;
float:none;
padding-left:0;
position:relative;
}
.menu ul li {
list-style: none;
float: none;
width: auto;
}
.menu ul li a {
display: inline-block;
height: auto;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
</style>
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home </li>
<li>about </li>
<li>Services </li>
<li>Register </li>
<li class="icon"> ☰ </li>
</ul>
please find the same example in [js fiddle][https://jsfiddle.net/yhq1pzhj/]1
<script>
function openNav() {
$("#mySidenav").css('width', '150px');
}
function closeNav() {
$("#mySidenav").css('width', '0px');
}
</script>
<div>
<div id="mySidenav" class="sidenav">
X
home
about
Services
Register
</div>
<i class="fa fa-bars" style="font-size:32px;cursor:pointer;padding-left: 35px;padding-top: 15px;" onclick="javascript:openNav()"></i></div>
======css======
.sidenav {
/* height: 100%; */
width: 0;
position: fixed;
z-index: 1;
/* top: 0;
left: 0; */
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}