So I tried to make a mobile menu and everything went perfectly fine, but when I click it it sends me to the top of the page instead of dropping down the menu. The CDN is linked properly (checked that with jQuery alert) so it's anchor tags fault or the jQuery code. Can you guys check it?
$(document).ready(function() {
$('#i-nav').click(function() {
$('ul').toggleClass('show');
});
});
html,
body {
min-width: 320px;
min-height: 320px;
margin: 0;
font-family: 'Lato', sans-serif;
background-color: #f1f1f1;
}
.show {
display: block;
}
.testnav ul {
list-style: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin-right: 50px;
}
.testnav ul li {
display: inline;
float: left;
width: auto;
height: 100px;
}
.testnav ul li a {
line-height: 100px;
display: block;
float: left;
padding: 0 20px;
color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
color: white;
border-bottom: 5px solid #b0b0b0;
}
#home:hover {
background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
float: left;
z-index: 101;
line-height: 100px;
text-align: center;
display: none;
}
#logo {
float: left;
margin-left: 50px;
margin-top: 15px;
}
a {
text-decoration: none;
text-transform: uppercase;
}
.floatright-wrapper {
float: right;
}
.testnav {
width: 100%;
height: 100px;
background: white;
margin: auto;
}
#media screen and (max-width: 1024px) {
.floatright-wrapper {
float: none;
}
.testnav ul {
width: 100%;
text-align: center;
margin: 0;
display: none;
}
.testnav ul li {
width: 100%;
}
.testnav ul li a {
width: 100%;
text-align: center;
outline: solid white 1px;
}
#logo {
margin: 10px;
}
#i-nav {
float: right;
margin-right: 40px;
display: block;
font-size: 30px;
color: black;
}
}
#media screen and (max-width: 400px) {
#logo {
width: 50%;
margin-top: 27px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
<img src="css/images/logo.png" alt="logo" id="logo">
<a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
<nav>
<ul>
<div class="floatright-wrapper">
<li>Home</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</div>
</ul>
</nav>
</div>
The page is jumping to the top because when you are clicking the link it thinks that is the action you want to take. In order to prevent that try to edit your function like I have below. The .preventDefault function tells the browser that you do not want it to attempt to go to a different page like an anchor tag normally would.
$('#i-nav').click(function(e) {
e.preventDefault();
$('ul').toggleClass('show');
});
EDIT
The reason your menu is not showing is because you are adding the show class to every ul that is on the page. Try to be specific and like $('.test-nav ul').toggleClass('show');
If you are still not seeing the menu, this is most likely because the previous css with display: none is overwriting your show class's display: block you can either resolve this by changing it to display: block !important or you can be explicit and give the ul a class or an id, then use that in your jQuery.
Here is an example of what I am talking about. If you have a couple of nested divs like so:
<div class="first">
<div class="second"></div>
</div>
With css like so:
.first .second {
display: none;
}
.second {
display: block;
}
The first one will always overwrite the second.
Just a simple thing need to added in your code and it will start working good . Just add !important to your class .show . Check my Code for reference.
$(document).ready(function() {
$('#i-nav').click(function() {
$('ul').toggleClass('show');
});
});
html,
body {
min-width: 320px;
min-height: 320px;
margin: 0;
font-family: 'Lato', sans-serif;
background-color: #f1f1f1;
}
.show {
display: block !important;
}
.testnav ul {
list-style: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin-right: 50px;
}
.testnav ul li {
display: inline;
float: left;
width: auto;
height: 100px;
}
.testnav ul li a {
line-height: 100px;
display: block;
float: left;
padding: 0 20px;
color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
color: white;
border-bottom: 5px solid #b0b0b0;
}
#home:hover {
background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
float: left;
z-index: 101;
line-height: 100px;
text-align: center;
display: none;
}
#logo {
float: left;
margin-left: 50px;
margin-top: 15px;
}
a {
text-decoration: none;
text-transform: uppercase;
}
.floatright-wrapper {
float: right;
}
.testnav {
width: 100%;
height: 100px;
background: white;
margin: auto;
}
#media screen and (max-width: 1024px) {
.floatright-wrapper {
float: none;
}
.testnav ul {
width: 100%;
text-align: center;
margin: 0;
display: none;
}
.testnav ul li {
width: 100%;
}
.testnav ul li a {
width: 100%;
text-align: center;
outline: solid white 1px;
}
#logo {
margin: 10px;
}
#i-nav {
float: right;
margin-right: 40px;
display: block;
font-size: 30px;
color: black;
}
}
#media screen and (max-width: 400px) {
#logo {
width: 50%;
margin-top: 27px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
<img src="css/images/logo.png" alt="logo" id="logo">
<a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
<nav>
<ul>
<div class="floatright-wrapper">
<li>Home</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</div>
</ul>
</nav>
</div>
Related
I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>
I have a button element on my webpage which I'm using as a mobile hamburger menu. I'm trying to keep it in the same spot relative to the page size with CSS.
Requirements
Needs to be positioned relative to page i.e.: position: absolute; left: 90%-page-size;
Cannot spill off the page on mobile
Is this possible with CSS? I'm not opposed to using a little JavaScript.
A code snippet is attached below. The element I'm targeting is a <button></button> element with a class of hamburger-menu.
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
text-align: right;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p,
ul,
ol,
li,
select {
font-family: 'Poppins', sans-serif;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
display: inline-block;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color: rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
<div class="nav-bar">
<nav class="desktop-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
<nav class="mobile-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
</button>
</div>
</nav>
</div>
Have you tried
position: fixed;
right: 10px;
In my navbar I have a li item that opens a dropdown menu when someone hovers over it. In small screens I have a hamburger menu that hides it.
The problem is that in mobile view, even though the li item is "hidden" inside the menu when someone hovers over its position on screen it appears (even though it is hidden inside the menu).
I think that this probably happens because I set "visibility: hidden;" but I don't know how else to do it.
I mean I want to dropdown when someones hover it on desktop view but on mobile I want to dropdown only if someones open the menu and then hover over it (or maybe click on it).
To save space I included below only the code that I find more relevant.
$(function() {
$(".toggle").on("click", function() {
if ($(".item").hasClass("active")) {
$(".item").removeClass("active");
} else {
$(".item").addClass("active");
}
});
});
nav {
background: #3e3e40;
padding: 0 20px;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
visibility: visible;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<li class="dropdwn item">
<span class="item">Categories</span>
<ul class="dropdwn-content">
<li>Product1</li>
<li>Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
I solved it using media queries
Adjust for whatever pixle size you want
Code Pen Link:
Click Here
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<!-- dropdwn -->
<li class=" item dropdwn">
<span class="item">Categories</span>
<ul class="dropdwn-content disapear">
<li class="disapear">Product1</li>
<li class="disapear">Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
nav {
background: #3e3e40;
padding: 0 20px;
}
#media all and (max-width:800px){
.disapear{
display: none;
}
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
#media all and (min-width: 800px){
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
I have created a template with a horizontal navigation in desktop, and a vertical navigation in mobile. I am using one nav list and changing the styling of it for desktop to mobile.
The thing is, the jQuery that I have given it adds some strange transitions to it that I want removed. A fade in/fade out of the text and the sidebar and a weird slide in/slide out effect.
What I am trying to achieve is to make the mobile nav slide in/slide out with the width intact, with no fade effects. I think the toggle() class has something to do with it, but Im not sure.
Also, when you open then click the hamburger to open then close the mobile nav, then go to view the desktop mode, the desktop nav is gone also until you refresh the page.
Any help would be great. Thanks.
$('.toggle-menu').click(function() {
$('nav').toggle("nav");
});
:root {
--black: #212121;
--grey: #ccc;
--light-grey: #eee;
--grey-opacity: #ccc, 0.2;
--gutter: 30px;
}
html,
body {
min-height: 100%;
}
html {
box-sizing: border-box;
background-color: var(--grey);
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.3;
color: var(black);
margin: 0;
}
a {
text-decoration: none;
color: var(--black);
}
a:hover,
a:focus {
color: var(--black);
}
ul {
padding: 0;
}
ul li {
display: inline;
list-style-type: none;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "aside content" "overview overview" "footer footer";
}
.header-skin {
background-color: rgba(255, 255, 255, 0.1);
}
header {
grid-area: header;
display: flex;
justify-content: space-between;
padding: var(--gutter) 15px;
max-width: 1200px;
margin: 0 auto;
}
.toggle-menu span {
width: 20px;
height: 2px;
margin-bottom: 4px;
border-radius: 50px;
background: var(--black);
display: block;
}
#media (min-width: 839px) {
.toggle-menu {
display: none;
}
nav ul {
margin: 0;
}
nav ul li {
text-transform: capitalize;
padding-left: 20px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
#media (max-width: 840px) {
nav {
height: 100%;
position: fixed;
background-color: rgba(255, 255, 255, 0.1);
left: 0;
top: 78px;
width: 300px;
margin-right: -300px;
display: none;
}
nav ul {
margin: 0;
padding: 40px 0 0 40px;
display: flex;
flex-direction: column;
}
nav ul li {
text-transform: capitalize;
padding-bottom: 40px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
<div class="container">
<div class="header-skin">
<header>
<div class="logo">
logo
</div>
<div class="toggle-menu">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>news</li>
<li>contact</li>
<li>twitter</li>
<li>instagram</li>
</ul>
</nav>
</header>
</div>
<div class="aside"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="functions.js"></script>
</div>
I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.
To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.
See snippet to view the issue.
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 600 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
font-family:
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
margin: 0 15%;
}
.logo {
color: #FFF;
font-size: 1.2em;
padding-top: 25px;
position: absolute;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
text-align: right;
}
.nav_list > li {
display: inline-block;
padding: 25px 15px;
}
.nav_list > li > a {
text-decoration: none;
font-size: 1.2em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background-color: blue;
}
.header_wrap {
margin: 0 5%;
}
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
}
.nav_list > li {
display: block;
border-bottom: 1px solid #FFF;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header class="header">
<div class="header_wrap">
<div class="logo">Garbrandt Construction</div>
<nav>
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Services</li>
<li>About us</li>
<li>Pricing</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
Try adding the last line to your nav_list (padding-left:0 is needed):
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
padding-left:0;
}
JS Fiddle
You should add a padding of 0 to the ul element. Padding: 0 or padding-left: 0 should do it.
.nav_list {
padding: 0;
}
Lists automatically have padding to the left;