I've been stuck on this for hours and hours and became pretty desperate. So I have this angular2 applicaton made for a school project but what I want to do is when i click on the + button this dropdown menu comes down and when i click on it again, or when I click on a link, it closes again. Right now it just stays open all the time and doesn't do anything when I click it
I have tried many different things, from ng2-dropdown to a javascript file that shows or hides the menu. I am out of options and getting really frustrated on this.
this is the html element in the browser before i click the +
this is the html element in the browser after i click the +
I have done the proper imports for the ng2-dropdown module which should make it work. It might be something small and stupid, but I don't see it.
This is my app.component which has the navigation bar as a template. on click i route to other components html's.
#Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
And this is my css (actually sass but gets converted when run) for the dropdown class just in case. So when i click on the button the class is .dropdown and when you click it again it should change to .hidden
.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;
&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}
a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;
li {
text-align: left;
padding: 10px 15px;
margin: 0;
i {
margin-right: 10px;
}
}
&:hover {
color: #ffffff;
li {
background: linear-gradient(to top right, $primary_color1_white, $melon 30%); } } } }
.hidden{visibility: hidden;}
in your template modify this :
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
and then in your component logic:
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}
Related
I have created a web portfolio for myself. Everything was fine while I was viewing it on my Desktop, but the issue happens when I view it on my phone.
a) The navbar collapses but it is not aligned properly.
b) There is some space on the right side of the viewport on my hero section. I am trying to understand the error but to no avail.
Link to portfolio: https://smammar.netlify.app/
HTML code
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="index.html"><img src="images/logo2.png" alt="logo"
style="width: 130px; height: 130px;"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation" id="responsiveNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- hero area -->
<section class="hero-area bg-primary" id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-white font-tertiary">Hi! I’m <br> Syed Mohammad Ammar <br> Full-Stack Designer</h2>
</div>
</div>
</div>
<div class="layer" id="l2">
<img src="images/illustrations/dots-cyan.png" alt="bg-shape">
</div>
<div class="layer" id="l4">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<div class="layer" id="l6">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
</div>
<div class="layer" id="l9">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
<li class="mb-3"><a class="text-white" href="https://twitter.com/SMAmmar5"><i class="fab fa-github"
id="socialIcons"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-twitter" id="socialIcons1"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-behance" id="socialIcons2"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-linkedin" id="socialIcons3"></i></i></a></li>
</ul>
<!-- /social icon -->
</section>
<!-- /hero area -->
<!-- about -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<p class="font-secondary paragraph-lg text-dark">I'm a full-stack designer based in Karachi, <span style="color: #228B22"> Pakistan </span> with
experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
lives of others by creating human centric products.</p>
<a href="https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf..." class="btn "
id="viewResume">View Resume</a>
</div>
</div>
</div>
</section>
CSS Code
.navigation {
padding: 40px 100px;
transition: .3s ease;
}
.navigation.nav-bg {
background-color: #000
;
padding: 0 70px;
}
#media (max-width: 600px) {
.navigation.nav-bg {
padding: 15px 20px;
}
}
#media (max-width: 600px) {
.navigation {
padding: 20px;
background: #000
;
}
}
.navbar .nav-item .nav-link {
font-family: "BwNistaInt-xBd";
text-transform: uppercase;
padding: 15px;
}
.navbar .nav-item.active {
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover{
border-color: #ffa500;
color: #ffa500;
box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
transition: all 0.2s;
cursor: pointer;
}
.hero-area {
padding: 300px 0 200px;
position: relative;
}
.hero-area h2 {
position: relative;
z-index: 2;
}
.layer {
position: absolute;
z-index: 1;
}
#l1 {
bottom: 0;
left: 0;
}
#l2 {
top: 190px;
left: -250px;
}
#l3 {
top: 200px;
left: 40%;
}
#l4 {
top: 200px;
right: 40%;
}
#l5 {
top: 100px;
right: -150px;
}
#l6 {
bottom: -20px;
left: 10%;
}
#l7 {
bottom: 100px;
left: 20%;
}
#l8 {
bottom: 160px;
right: 45%;
}
#l9 {
bottom: 100px;
right: -10px;
}
.layer-bg {
position: absolute;
bottom: 0;
left: 0;
}
Here's a quick fix. Try to add this into your css this will remove the spacing and improper alignments in responsive mode.
body, html {
overflow-x:hidden;
}
You can remove the header tag & it's class and then add 'fixed-top' class to the nav tag. That might solve the issue.
I have a navigation bar which is located at the bottom of the screen. on the bottom navigation I have a button called Add, once clicked it will open a modal. I had to use the Z-index style so that when the modal is open It's not possible to open the Top navigation menu.
I'm trying to figure out how to stop the Bottom navigation overlapping the Top navigation side menu once it is active.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1002;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>FlowerPot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>
Probably just need to change:
z-index: 1002;
to
z-index: 1000;
and move the modal outside of the footer.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1000;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>FlowerPot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>
On my ruby on rails 5 app I have a menu button that uses javascript to toggle the menu, the toggle function is showing and hiding the menu but the menu is not styled with css anymore
onclick the menu toggles like it should but all the elements are not styled, I dont know if its related to rails or I am missing something here
//Toggle between adding and removing the "show_for_mobile" class to admin_side_bar when the user clicks on the icon
function toggleNav() {
var x = document.getElementById("admin_side_bar");
console.log(x.className)
if (x.className === "admin_side_bar") {
x.className += "show_for_mobile";
} else {
x.className = "admin_side_bar";
}
}
.admin_side_bar {
width: 70%;
height: 50vh;
background-color: #e2e6e8;
position: absolute;
left: 0;
top: 60px;
padding: 20px 10px;
display: none;
}
//show side bar on click
.show_for_mobile {
display: block;
}
.admin_side_bar>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.admin_side_bar>ul>a {
color: #3d3d3d;
font-size: 19px;
text-decoration: none;
}
.admin_side_bar>ul>a:hover {
color: #06bed3;
}
.admin_side_bar .fas {
margin-right: 20px;
color: #afaeae;
}
.admin_side_bar .fas:hover {
color: #7a7a7a;
}
.admin_side_bar>ul>a>li {
margin-bottom: 20px;
}
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
<ul>
<a href="#">
<li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
</a>
<a href="#">
<li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
</a>
<a href="#">
<li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
</a>
<a href="#">
<li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
</a>
<a href="#">
<li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
</a>
</ul>
</div>
When you add the .show_for_mobile class the original display:none from .admin_side_bar still takes precedence. If all you really want to do is show the nav then you can use x.style.display = "block"; to overwrite display:none from the admin_side_bar class
x.style.display="block" works because it adds inline style which is the highest CSS specificity (it overwrites all other css rules).
From CSS specificity
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
document.getElementById("toggleButton").addEventListener("click", toggleNav);
//Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon
function toggleNav() {
var x = document.getElementById("admin_side_bar");
if (x.className === "admin_side_bar") {
x.className += " show_for_mobile";
x.style.display = "block";
} else {
x.className = "admin_side_bar";
x.style.display = "none";
}
}
.admin_side_bar {
width: 70%;
height: 50vh;
background-color: #e2e6e8;
position: absolute;
left: 0;
top: 60px;
padding: 20px 10px;
display: none;
}
//show side bar on click
.show_for_mobile {
display: block !important;
}
.admin_side_bar>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.admin_side_bar>ul>a {
color: #3d3d3d;
font-size: 19px;
text-decoration: none;
}
.admin_side_bar>ul>a:hover {
color: #06bed3;
}
.admin_side_bar .fas {
margin-right: 20px;
color: #afaeae;
}
.admin_side_bar .fas:hover {
color: #7a7a7a;
}
.admin_side_bar>ul>a>li {
margin-bottom: 20px;
}
<button id="toggleButton">Toggle Nav</button>
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
<ul>
<a href="#">
<li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
</a>
<a href="#">
<li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
</a>
<a href="#">
<li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
</a>
<a href="#">
<li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
</a>
<a href="#">
<li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
</a>
</ul>
</div>
I currently have the following overlap problem with my dropdowns:
As you can see if I press my most right button (the filter logo) and then press my dropdown link it overlaps in an ugly way. I would like that the "Dropdown link" dropdown always goes on top.
I have tried playing with the CSS (z-index, position, display, etc.) of both dropdowns, but I can't seem to figure it out. From what I understand z-index should solve my problem, but it doesn't. So that's why I went to play with position / display etc, but that didn't help either and confused me even more.
Anyone have any idea what I am doing wrong? Would really appreciate a push in the right direction. (Other random feedback on my current code is also appreciated)
My code:
https://jsfiddle.net/afbs97dy/4/
HTML:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
<a class="navbar-brand naamdashboard" href="#">test</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#test1">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="" id="filter">
<i class="fas fa-filter filterlogo"></i>
</a>
<ul class="dropdown-menu dropdownqlik">
<div id="CurrentSelections" class="qvobjects">
<div class="current-selections-placeholder">
<span>Connect to app to see Selection Toolbar</span>
</div>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</body></html>
CSS:
/* navbar */
.navbar {
background-color: #3b3b3b;
font-family: Montserrat, sans-serif;
font-size: 12px !important;
letter-spacing: 4px;
}
.navbar-brand {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
.logoklant {
height:40px;
}
.naamdashboard {
font: 20px;
}
.filterlogo {
font-size: 32px;
margin-left: 5px;
margin-top: 2px;
padding-right: 10px;
}
.dropdownqlik {
height: 36px;
}
#filter.is-active + .dropdown-menu {
display: block;
width: 100.1%;
top:53px;
}
.is-pos-static {
position: static !important;
color: white !important;
}
#CurrentSelections {
margin-top: -8px;
margin-left:-1px;
}
/* Scroll to top */
.scrollToTop {
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 95vh;
right: 1vw;
z-index: 3000;
}
.scrollToTopLogo {
color: black;
}
JS:
/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){
$("#filter").click(function(){
$(this).parent('li').toggleClass('is-pos-static');
$(this).toggleClass("is-active");
});
});
Thanks for taking your time to help.
add CSS
.dropdown-menu.show {
z-index: 9999;
}
I am trying to resize my footer with jquery. So far when I resize the window it doesn't add the class. Am I implementing it right?
/* My jQuery: */
$(document).ready(function() {
$(window).on('resize', function(){
var win = $(this);
if (win.width() > 600) {
$("#anc").addClass('social-lg');
$("#ico").addClass("icon-lg");
} else {
$("#anc").addClass('social-sm');
$("#ico").addClass("icon-sm");
}
});
});
/* My CSS: */
.social-lg div.col-md-12 > ul > li > a {
border: 2px solid #616161;
border-radius: 50%;
display: inline-block;
letter-spacing: normal;
text-align: center;
height: 4.25rem;
width: 4.25rem;
}
.icon-lg div.col-md-12 > ul > li > a > i {
padding-top: .5rem;
font-size: 2em;
}
.social-sm div.col-md-12 > ul > li > a {
border: 2px solid #616161;
border-radius: 50%;
display: inline-block;
letter-spacing: normal;
text-align: center;
height: 3.25rem;
width: 3.25rem;
}
.icon-sm div.col-md-12 > ul > li > a > i {
padding-top: .5rem;
font-size: 1.5em;
}
<!-- My HTML: -->
<div class="row" id="footer">
<div class="col-md-12">
<ul>
<li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
<p>Lorem Ipsum</p>
</ul>
</div>
</div>
Edit: embedded code inside the question instead of providing a link
You have a number of same id parameters for li and i tags which prevents jquery to select all the elements of the same id, so make them classes like following
<div class="row" id="footer">
<div class="col-md-12">
<ul>
<li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
<p>Lorem Ipsum</p>
</ul>
</div>
</div>
Then use the modified javascript code
$(document).ready(function() {
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 600) {
$(".anc").addClass('social-lg').removeClass('social-sm');
$(".ico").addClass("icon-lg").removeClass("icon-sm");
} else {
$(".anc").addClass('social-sm').removeClass('social-lg');
$(".ico").addClass("icon-sm").removeClass("icon-lg");
}
}).trigger("resize"); //this to force first event on load
});
You didn't include a case when there's a need to delete a one class to make another one work. Toggle class should fix it.
Edit: toggle won't work in this case. You have to use another solution:
$(document).ready(function() {
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 600) {
$("#anc").addClass('social-lg');
$("#ico").addClass("icon-lg");
$("#anc").removeClass('social-sm');
$("#ico").removeClass("icon-sm");
} else {
$("#anc").addClass('social-sm');
$("#ico").addClass("icon-sm");
$("#anc").removeClass('social-lg');
$("#ico").removeClass("icon-lg");
}
});
});