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
Related
I have a navigation and I would like to add a dropdown menu (on hover) on two of my navigation list items (on the first two on the left side). What's the best way to possibly do this? I tried some solutions from Google but none really worked for me it just messed up my navigation.
Here's my Navigation:
(expand to full page to see the nav working)
ul li {
list-style: none;
}
html {
font-family: "Roboto", serif;
}
.navigation {
position: fixed;
width: 100%;
text-align: center;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5em;
height: 180px;
font-family: "Roboto", serif;
transition: all 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
background-color: rgba(175, 213, 123, 0.70);
}
.navigation ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
z-index: 1;
}
.navigation ul li {
float: left;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
color: #222222;
margin: -12px 0;
letter-spacing: 0.200em;
transition: all 0.5s ease;
}
.navigation ul li:hover {
color: #ffa947;
cursor: pointer;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation ul li {
margin: 17px 0;
}
}
.navigation ul li.reg {
font-size: 10px;
font-size: 0.625rem;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation ul li.reg {
display: none;
}
}
.navigation ul li.title {
font-size: 24px;
font-size: 1.5rem;
}
.navigation h1 {
font-size: 24px;
font-size: 1.5rem;
color: #222222;
font-weight: 300;
z-index: 1;
margin: 0;
padding: 0;
letter-spacing: 10px;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation {
flex-direction: column;
height: auto;
}
}
.navigation.sticky {
height: 55px;
background-color: rgba(175, 213, 123, 1);
}
.navigation.sticky::after {
opacity: 1;
filter: alpha(opacity=100);
}
.navigation.sticky ul li {
margin: 0;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation.sticky {
height: auto;
}
.navigation.sticky .title {
margin: 17px 0;
}
}
.navigation .hidden {
visibility: hidden;
height: 0;
display: none;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation .hidden {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
float: left;
}
.navigation .hidden li {
margin: 0;
padding: 10px 0;
transition: all 0s;
}
}
.navigation .hidth {
display: none;
}
.navigation .switch .hidth {
display: block;
}
.navigation .switch .unhid {
display: none;
}
.navigation .hidden.showmenu {
visibility: hidden;
height: 0;
display: none;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation .hidden.showmenu {
visibility: visible;
height: auto;
display: block;
}
.navigation .hidden.showmenu li {
width: 100%;
float: left;
transition: all 0s;
}
.navigation .hidden.showmenu li:last-child {
padding-bottom: 30px;
}
}
.navigation .bar {
display: none;
margin: 17px 0;
font-size: 21px;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation .bar {
display: block;
}
}
.navigation .bar:hover {
cursor: pointer;
}
<nav class="navigation">
<ul>
<a href="#">
<li class="reg goHome">Kleingartenverein</li>
</a>
<a href="#">
<li class="reg goug">UrbanGardening</li>
</a>
<a href="#">
<li class="title gotop">GARDEN7</li>
</a>
<a href="#">
<li class="reg goGalerie">Galerie</li>
</a>
<a href="#">
<li class="reg goKontakt">Kontakt</li>
</a>
<span class="bar">
<i class="fa fa-bars unhid" aria-hidden="true"></i>
<i class="fa fa-times hidth" aria-hidden="true"></i>
</span>
</ul>
<ul class="hidden">
<a href="#">
<li class="goHomemob">Kleingartenverein</li>
</a>
<a href="#">
<li class="goKleingartenvereinmob">Urban Gardening</li>
</a>
<a href="#">
<li class="goGaleriemob">Galerie</li>
</a>
<a href="#">
<li class="goKontaktmob">Kontakt</li>
</a>
</ul>
</nav>
ul li {
list-style: none;
}
html {
font-family: "Roboto", serif;
}
.navigation {
position: fixed;
width: 100%;
text-align: center;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5em;
height: 180px;
font-family: "Roboto", serif;
transition: all 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
background-color: rgba(175, 213, 123, 0.70);
}
.navigation ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
z-index: 1;
}
.navigation ul li {
float: left;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
color: #222222;
margin: -12px 0;
letter-spacing: 0.200em;
transition: all 0.5s ease;
position:relative;
}
.navigation ul li a{
font-size: 0.625rem;
text-decoration: none;
color: #222222;
}
.navigation ul li a:hover{
color: #ffa947;
}
.navigation ul li .submenu{
display:none;
position: absolute;
top:15px;
left:0;
width: 200px;
background: #FFF;
border: 1px #e8e8e8 solid;
}
.navigation ul li:hover .submenu{
display: block;
}
.navigation ul li .submenu li{
display: inline-block;
width: calc(100% - 20px);
margin: 0;
padding: 5px 10px;
list-style: none;
border-bottom: 1px #e8e8e8 solid;
}
.navigation ul li .submenu li a{
color: #ffa947;
}
.navigation ul li:hover {
color: #ffa947;
cursor: pointer;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation ul li {
margin: 17px 0;
}
}
.navigation ul li.reg {
font-size: 10px;
font-size: 0.625rem;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation ul li.reg {
display: none;
}
}
.navigation ul li.title a{
font-size: 24px;
font-size: 1.5rem;
}
.navigation h1 {
font-size: 24px;
font-size: 1.5rem;
color: #222222;
font-weight: 300;
z-index: 1;
margin: 0;
padding: 0;
letter-spacing: 10px;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation {
flex-direction: column;
height: auto;
}
}
.navigation.sticky {
height: 55px;
background-color: rgba(175, 213, 123, 1);
}
.navigation.sticky::after {
opacity: 1;
filter: alpha(opacity=100);
}
.navigation.sticky ul li {
margin: 0;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation.sticky {
height: auto;
}
.navigation.sticky .title {
margin: 17px 0;
}
}
.navigation .hidden {
visibility: hidden;
height: 0;
display: none;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation .hidden {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
float: left;
}
.navigation .hidden li {
margin: 0;
padding: 10px 0;
transition: all 0s;
}
}
.navigation .hidth {
display: none;
}
.navigation .switch .hidth {
display: block;
}
.navigation .switch .unhid {
display: none;
}
.navigation .hidden.showmenu {
visibility: hidden;
height: 0;
display: none;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation .hidden.showmenu {
visibility: visible;
height: auto;
display: block;
}
.navigation .hidden.showmenu li {
width: 100%;
float: left;
transition: all 0s;
}
.navigation .hidden.showmenu li:last-child {
padding-bottom: 30px;
}
}
.navigation .bar {
display: none;
margin: 17px 0;
font-size: 21px;
}
#media (min-width: 0) and (max-width: 770px) {
.navigation .bar {
display: block;
}
}
.navigation .bar:hover {
cursor: pointer;
}
<nav class="navigation">
<ul>
<li class="reg goHome"> Kleingartenverein
<ul class="submenu">
<li>
Demo Link
</li>
<li>
Demo Link
</li>
<li>
Demo Link
</li>
</ul>
</li>
<li class="reg goug">UrbanGardening
<ul class="submenu">
<li>
Demo Link
</li>
<li>
Demo Link
</li>
<li>
Demo Link
</li>
</ul>
</li>
<li class="title gotop">GARDEN7</li>
<li class="reg goGalerie">Galerie</li>
<li class="reg goKontakt">Kontakt</li>
<span class="bar">
<i class="fa fa-bars unhid" aria-hidden="true"></i>
<i class="fa fa-times hidth" aria-hidden="true"></i>
</span>
</ul>
<ul class="hidden">
<li class="goHomemob">Kleingartenverein</li>
<li class="goKleingartenvereinmob">Urban Gardening </li>
<li class="goGaleriemob">Galerie</li>
<li class="goKontaktmob">Kontakt</li>
</ul>
</nav>
I have provided a snippet, however the output is different from here and so please beware. I am trying to achieve where:
When the user clicks 'Home 1' under 'Home', it will be an active element
In addition, when the user clicks 'Home 2', 'Home 1' will be inactive and 'Home 2' will be an active element
Same goes for the 'Pages' dropdown list. May I know what are the solutions?
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
</div>
</div>
</body>
</html>
try this use jquery to control style
https://codepen.io/anon/pen/ZVbVYw
$(document).ready(function () {
$('#homeSubmenu li, #pageSubmenu li').on('click', function () {
$('#homeSubmenu li, #pageSubmenu li').removeClass('active');
$(this).addClass('active');
});
});
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>
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;
}
}
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;
}