CSS style being crossed out because of media query?

CSS style being crossed out because of media query? - javascript

So in this little fiddle I made, I'm trying to change the max-height to 20em when .menuToggle is clicked, I'm doing this by toggling a class. The class gets toggled but in chrome developer tools the style is crossed out. I'm assuming this has something to do with the media query but not entirely sure.
Any help would be greatly appreciated, thanks :).
https://jsfiddle.net/kakbxak0/
#media screen and max-width 1024px{
.navBar ul li {
box-sizing:border-box;
width:100%;
text-align:center;
padding:15px;
}
.navBar>ul {
max-height:0;
}
.showing {
max-height:20em;
}
header {
text-align:center;
}
.menuToggle {
display:block;
}
}

It's just a specificity Problem. The Specificy of a Class and an Element/Pseudo-Element is higher than just a class.
So you just need to make the .solving selector more specific. E.g.
ul.solving
.navbar .solving
!important
If you don't know the specificity you can check on https://specificity.keegan.st/

Try to put !important after the 20em in the .showing class. I believe the problem is you're adding style to a tag which takes precedence over a class. I could be wrong with the logic but adding !important was tested and works.
$(document).ready(function(){
$(".menuToggle").click(function(){
$(".navBar > ul").toggleClass("showing");
});
});
header{
box-sizing: border-box;
background-color: #5e99f5;
width: 100%;
padding: 12.5px;
color: white;
text-align: right;
font-size: 4vmin;
font-weight: bold;
}
.navBar>ul{
background-color: #3d6db7;
overflow: hidden;
color: white;
padding: 0;
text-align: left;
margin: 0;
}
.navBar li{
display: inline-block;
padding: 15px;
}
.navBar a, .menuToggle{
text-decoration: none;
color: white;
font-size: 14pt;
}
.menuToggle{
width: 100%;
background: #3861a0;
text-align: center;
box-sizing: border-box;
padding: 16px 10px;
cursor: pointer;
display: none;
}
#media screen and (max-width: 1024px){
.navBar ul li{
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
}
.showing{
max-height: 20em!important;
}
.navBar>ul{
max-height: 0em;
}
header{
text-align: center;
}
.menuToggle{
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<body>
<header>
Title
</header>
<nav class="navBar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
<div class="menuToggle">Menu</div>
</nav>
</body>

Just replace .showing with .navBar>ul.showing see below
.navBar ul.showing{
max-height: 20em;
}
$(document).ready(function(){
$(".menuToggle").click(function(){
$(".navBar > ul").toggleClass("showing");
});
});
header{
box-sizing: border-box;
background-color: #5e99f5;
width: 100%;
padding: 12.5px;
color: white;
text-align: right;
font-size: 4vmin;
font-weight: bold;
}
.navBar>ul{
background-color: #3d6db7;
overflow: hidden;
color: white;
padding: 0;
text-align: left;
margin: 0;
}
.navBar li{
display: inline-block;
padding: 15px;
}
.navBar a, .menuToggle{
text-decoration: none;
color: white;
font-size: 14pt;
}
.menuToggle{
width: 100%;
background: #3861a0;
text-align: center;
box-sizing: border-box;
padding: 16px 10px;
cursor: pointer;
display: none;
}
#media screen and (max-width: 1024px){
.navBar ul li{
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
}
.navBar>ul{
max-height: 0em;
}
.navBar>ul.showing{
max-height: 20em;
}
header{
text-align: center;
}
.menuToggle{
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<body>
<header>
Title
</header>
<nav class="navBar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
<div class="menuToggle">Menu</div>
</nav>
</body>

You have used wrong media query, Please looket this
#media screen and (max-width:1024px) {
.navBar ul li {
box-sizing:border-box;
width:100%;
text-align:center;
padding:15px;
}
.navBar>ul {
max-height:0;
}
.showing {
max-height:20em;
}
header {
text-align:center;
}
.menuToggle {
display:block;
}
}

Related

Dropdown menu from hover to onclick

How would I convert the following sub-navigation menu from hover to on-click with j-query? In the example I have added an active class and used j-query to display the sub-nav however it disappears after the user clicks it.
https://codepen.io/patriciaworth/pen/bGGMBow
I followed the instructions on this webpage to no avail.
how to change dropdown menu from hover to onclick
HTML
<!DOCTYPE html>
<html>
<head>
<title>Liive Real Estate</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li>Home</li>
<li>
Property
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>
Agents
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>Pages</li>
<li>Contact</li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>
</body>
</html>
SCSS
/*reset*/
*
{
margin: 0;
padding:0;
list-style-type: none;
border: none;
text-decoration: none;
}
html
{
width:100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;
//fonts
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;
//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;
.panel
{
display: block;
}
.navbar
{
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: $heading-font;
padding: 0 20px;
#media screen and (max-width: $medium)
{
display: block;
padding: 0;
}
.logo
{
flex:1;
text-align: left;
font-size: 22px;
color: $purple;
font-weight: 500;
#media screen and (max-width: $medium)
{
display: block;
border-bottom: 1px solid $purple;
text-align: left;
padding: 20px;
}
}
.toggle
{
display: none;
#media screen and (max-width: $medium)
{
display: block;
position: absolute;
top: 20px;
right:20px;
font-family: $heading-font;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.panel
{
flex: 7;
display: flex;
align-items: center;
justify-content: center;
#media screen and (max-width: $medium)
{
display: none;
}
.links
{
flex:6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
}
ul
{
display: block;
width: 100%;
#media screen and (max-width: $medium)
{
padding: 20px 0;
}
}
li
{
display: inline-block;
#media screen and (max-width: $medium)
{
display: block;
}
}
ul li a
{
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
#media screen and (max-width: $medium)
{
padding:5px 0;
}
}
ul li a:hover
{
background: $purple;
color: #fff;
}
ul li ul
{
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
#media screen and (max-width: $medium)
{
position: relative;
top:0;
width: 100%;
}
}
ul li ul li
{
display: block;
text-align: left;
#media screen and (max-width: $medium)
{
text-align: center;
}
a
{
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
&:hover
{
color: $purple;
background: transparent !important;
}
}
}
ul li:hover ul
{
display: block;
}
ul li:hover a
{
background: $purple;
color: #fff;
}
/*THIS DOES NOT WORK*/
/*.active
{
display: block !important;
a
{
background: $purple;
color: #fff;
}
}*/
.signup
{
flex:1;
text-align: right;
button
{
border: 1px solid $purple;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
&:hover
{
background: $purple;
color: #fff;
}
}
#media screen and (max-width: $medium)
{
text-align: center;
padding-bottom: 20px;
display: block;
}
}
}
JS
$(document).ready(function(){
$(".toggle").click(function(){
$("nav .panel").slideToggle();
});
/*THIS DOES NOT WORK*/
/*$("nav").on("click", "li", function(){
$(this).children("ul").toggleClass("active");
$("nav li").not(this).children("ul").removeClass("active");
});*/
});

You can directly covert the hover class into an active class, and then on click, toggle the active class. Find the below snippet and view in full screen so that its not affected by the media-queries.
Additinally, you need to include href="#" or else it will reload the page.
ul li.active ul {
display: block;
}
ul li.active a {
background: $purple;
color: #fff;
}
$(document).ready(function() {
$(".toggle").click(function() {
$("nav .panel").slideToggle();
});
$("nav").on("click", "li", function() {
$('nav li.active').not(this).removeClass("active"); // remove previous selection
$(this).toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
/*reset*/
* {
margin: 0;
padding: 0;
list-style-type: none;
border: none;
text-decoration: none;
}
html {
width: 100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
.panel {
display: block;
}
.navbar {
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
padding: 0 20px;
/*THIS DOES NOT WORK*/
/*.active {
display: block !important;
a {
background: $purple;
color: #fff;
}
}
*/
}
#media screen and (max-width: 992px) {
.navbar {
display: block;
padding: 0;
}
}
.navbar .logo {
flex: 1;
text-align: left;
font-size: 22px;
color: #a491d3;
font-weight: 500;
}
#media screen and (max-width: 992px) {
.navbar .logo {
display: block;
border-bottom: 1px solid #a491d3;
text-align: left;
padding: 20px;
}
}
.navbar .toggle {
display: none;
}
#media screen and (max-width: 992px) {
.navbar .toggle {
display: block;
position: absolute;
top: 20px;
right: 20px;
font-family: 'Poppins', sans-serif;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.navbar .panel {
flex: 7;
display: flex;
align-items: center;
justify-content: center;
}
#media screen and (max-width: 992px) {
.navbar .panel {
display: none;
}
}
.navbar .panel .links {
flex: 6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
.navbar ul {
display: block;
width: 100%;
}
#media screen and (max-width: 992px) {
.navbar ul {
padding: 20px 0;
}
}
.navbar li {
display: inline-block;
}
#media screen and (max-width: 992px) {
.navbar li {
display: block;
}
}
.navbar ul li a {
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
}
#media screen and (max-width: 992px) {
.navbar ul li a {
padding: 5px 0;
}
}
.navbar ul li a:hover {
background: #a491d3;
color: #fff;
}
.navbar ul li ul {
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
}
#media screen and (max-width: 992px) {
.navbar ul li ul {
position: relative;
top: 0;
width: 100%;
}
}
.navbar ul li ul li {
display: block;
text-align: left;
}
#media screen and (max-width: 992px) {
.navbar ul li ul li {
text-align: center;
}
}
.navbar ul li ul li a {
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
}
.navbar ul li ul li a:hover {
color: #a491d3;
background: transparent !important;
}
.navbar ul li.active ul {
display: block;
}
.navbar ul li.active a {
background: #a491d3;
color: #fff;
}
.navbar .signup {
flex: 1;
text-align: right;
}
.navbar .signup button {
border: 1px solid #a491d3;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
}
.navbar .signup button:hover {
background: #a491d3;
color: #fff;
}
#media screen and (max-width: 992px) {
.navbar .signup {
text-align: center;
padding-bottom: 20px;
display: block;
}
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li>Home</li>
<li>
Property
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>
Agents
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>Pages</li>
<li>Contact</li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>

You can search element like immediate siblings next to <a> tag which is <ul>:
$('a+ul').click()
or search all the items
you can get one more deep:
$('a+ul>li').click()
+ immediate sibilin
> all children

mobile view menu issue?

I implemented the code below, I'm facing an issue on mobile view when clicking the menu button on mobile didn't show the menu but if I didn't scroll down the menu works,
how can i fix this issue on mobile view
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">hola</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
I have on mobile view an issue when scroll down and click menu button nothing appear but when I was at the to when click menu will appear the menu item
all I need is when scroll down and up the menu appears
how can I fix this issue

The issue is because you set overflow: hidden to your body, while the nav is part of the page flow. The nav will always be offset relative to it's parent.
Here's an example where overflow: hidden is disabled:
http://jsfiddle.net/u9L50243/ (Toggle the menu and then scroll - You'll notice the navigation scrolls in to, and out of the viewport)
The easiest fix is just to apply position: fixed to your nav bar, in addition to the .responsive-bar.
For example: http://jsfiddle.net/ebcvqds7/

mobile view issue when the menu opened?

when opening the menu and scroll down the navbar still move
I want when open the menu prevents the scroll
I implemented the below code for responsive navbar but I'm facing an issue on the mobile view only
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
any help on that issue, please
note: i hide the banner above the navbar on the mobile view but on the big screen view not hidden

Add 'overflow:hidden' to body when menu is open. it will solve your problem.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
$('body').css('overflow', 'hidden');
}
else
{
$('nav').removeClass('fixed');
$('body').css('overflow', 'auto')
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
left:0;
/* bottom:0;
overflow:auto; */ /* if you want scroll inside menu */
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
top:0;
left:0;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

navbar responsive issue when resize the browser width?

i have an issue for the responsive navbar, when i resize the browser for the mobile view and open then close the menu button, after that make the browser full screen for the big screen view the navbar will disappear
any help for that issue
i need to add another feature to fix the navbar when scroll down but when scroll on the mobile the menu it looks messed up
below my code(on snippet)
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

As per your html structure you have to add below code to your css
#media (min-width:768px){
nav{
display: block !important;
}
}
Using this you don't have to make any changes in your html and css.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
#media (min-width:768px){
nav{
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

You also need to update your navigation when the window is resized. Kindly check. Hope this is helpful to you. Just made a update in jquery.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
});
$( window ).resize(function() {
if($(window).width() > 767) {
$("nav").slideDown(800);
}
});
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
display: block
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

Please check the below line of code to add image above nav and make header sticky.
Script
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("nav").toggleClass("fixed_nav");
$(".responsive-bar").toggleClass("addtop");
});
});
$(window).scroll(function(){
if($(window).width() > 767) {
if ($(window).scrollTop() >= 150) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
}
else {
if ($(window).scrollTop() >= 150) {
$('.responsive-bar').addClass('fixed-header');
}
else {
$('.responsive-bar').removeClass('fixed-header');
}
}
});
HTML
<div class="img-wrapper">
<img src="https://via.placeholder.com/1250x150">
</div>
<nav class="nav-bar">
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
.............
CSS
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
img {
display: none;
}
.nav-bar.fixed_nav{
display: none;
position: fixed;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
}
.fixed-header.addtop {
top: 98px;
}
}
#media (min-width:768px){
nav{
display: block !important;
}
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

Hamburger icon in responsive nav bar not functioning properly

When my navigation bar is viewed at the tablet/mobile size and the hamburger icon is clicked, it jumps to the left and a strange 'gap' appears underneath my navigational tabs. Can you please help me solve this? This is my first time asking a question here and writing HTML... thanks in advance
/* NAVIGATION MENU */
.icon img {
margin-top: 2.5px;
}
.navbar {
padding-left: 0%;
background-color: #454242;
text-align:center;
}
ul.menu {
height: 43px;
background-color: #454242;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
transiton: 1.0s;
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
display:inline-block;
text-align: center;
}
ul.menu li {
float: left;
display: inline;
}
ul.menu li a {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: 0.5s;
font-size: 17px;
height: 23px;
}
ul.menu li a:hover {
background-color: #FFFFFF;
color: black;
}
ul.menu li a:active {
background-color: #FFFFFF;
color: black;
}
ul.menu li.icon {
display:none;
}
#media screen and (max-width: 680px) {
ul.menu li:not(:first-child){
display:none;
margin: auto;
float: left;
}
ul.menu li.icon {
display: inline;
float: left;
position: absolute;
left: 0px;
text-align: left;
}
}
#media screen and (max-width: 680px) {
.navbar {
padding-left: 0%;
}
ul.menu.responsive li.icon {
float: left;
position: absolute;
left: -10px;
text-align: left;
color: black;
}
ul.menu.responsive{
position: relative;
height: 258px;
transition: 1.0s;
width: 100%
}
ul.menu.responsive li{
float: none;
display: inline;
}
ul.menu.responsive li a{
display:block;
text-align: center;
}
}
<!--NAVIGATION BAR-->
<div class="navigation col-12">
<div class="navbar">
<ul class="menu">
<li class="icon">
☰</li>
<li> Home</li>
<li> Eat</li>
<li> Shop</li>
<li> Discover</li>
<li> Edge Club</li>
<li> Contact</li>
</ul>
</div>
</div>
<script>
function dropdownMenu() {
document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>

ul.menu.responsive li.icon {
float: left;
position: absolute;
/* left: -10px; */ REMOVE
text-align: left;
color: black;
}

Develop Reference

JavaScript is the programming language of the Web.

CSS style being crossed out because of media query? - javascript

You have used wrong media query, Please looket this #media screen and (max-width:1024px) { .navBar ul li { box-sizing:border-box; width:100%; text-align:center; padding:15px; } .navBar>ul { max-height:0; } .showing { max-height:20em; } header { text-align:center; } .menuToggle { display:block; } }

Related

Dropdown menu from hover to onclick

mobile view menu issue?

mobile view issue when the menu opened?

navbar responsive issue when resize the browser width?

Hamburger icon in responsive nav bar not functioning properly

Categories

Resources