make dropdown menu still visible even when mouse hover is lost - javascript

I need to have main menu with dropdown menu items. So, when user hovers menu item then dropdown menu is shown. This is already done by CSS and :hover selector.
However, usually when :hover is lost (mouse is moved outside menu item element) then appropriate dropodown also disappears. But what I need - menu is still seen and disappears only on click.
One example of this effect is here: http://theemon.com/f/forever/Livepreview/agency-wedding/index.html
However I do not understand which CSS or JS creates this effect, so I cannot add snipper here (if I could, I would not ask).
In this particular example, when you hover menu item "Pages", dropdown menu appears, but it doesn't disappear when :hover is lost. It stays there. I am not able to find, what makes this effect - is it some JS or CSS?
HTML:
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li>
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
</ul>
Some CSS:
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul, ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation > li:hover .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}

You can add a class like .open on mouseenter to your li element which contains a dropdown.
Then do this:
var dropdown = $(".is-dropdown");
dropdown
.on("mouseenter", function() {
$(this)
.addClass("open");
})
.on("click", function() {
$(this).removeClass("open");
});
jsFiddle
CODE SNIPPET:
var dropdown = $(".is-dropdown");
dropdown
.on("mouseenter", function() {
$(this)
.addClass("open");
})
.on("click", function() {
$(this).removeClass("open");
});
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul,
ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}
.navigation > .open .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li class="is-dropdown">
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
</ul>

I am sure there are other parameters to this functionality, but here is a base level solution for you.
$(document).ready(function() {
$('.drop-down').slideUp(0); //hides all your drop downs
$('.navigation li:has(> ul.drop-down)').on('mouseenter', function() {
$(this).children('ul').slideDown();
});
$('.closeEm').on('click', function(e) {
e.preventDefault(); // this stops the page jumpping on click
$('ul.drop-down').slideUp();
});
});
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul,
ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation li {
background-color: #ddd;
}
.drop-down {
position: absolute;
top: 70px;
width: 160px;
z-index: 999;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li>
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
<li>
pages
</li>
<li>
pages
</li>
<li>
pages
<li>
Close Dropdowns
</li>
</ul>

I'm not sure if i understand what you are trying to do, but i guess that this example will be what you need:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Related

Dropdown - cant click on the items

I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li {
position: relative;
}
#navContainer ul li span {
display: block;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
}
#navContainer ul ul {
position: absolute;
display: none;
}
#navContainer ul li:hover ul {
width: 80%;
position: absolute;
display: block;
left: 88px;
top: 0;
}
<div id="navContainer">
<ul>
<li><span>Home</span></li>
<li>
<span>About </span>
<ul>
</ul>
</li>
<li>
<span>Quiz's</span>
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li><span>Info</span></li>
</ul>
</div>
This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears
I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.
Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
position: relative;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
background: lightgrey;
position: relative;
}
ul>li {
position: relative;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
position: relative;
}
#navContainer ul>li>ul {
position: absolute;
display: none;
left: 100%;
width: 100%;
background-color: pink;
top: 0px;
}
#navContainer>ul>li:hover>ul {
display: block;
}
<div id="navContainer">
<ul>
<li>Home</li>
<li>
About
<ul>
</ul>
</li>
<li>
Quiz's
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li>Info</li>
</ul>
</div>
You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.
Added a border to the li elements to demonstrate.
https://jsfiddle.net/rojqczsp/
You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.

Is there a way to make my navbar active and also keep hover effect?

Hi im wondering how i can make my navbar also active so when im on my secton page for about for example. I want the red line to be under About and so on. How do i accomplish that?
I have been struggeling to make it active but cant do it and its the last thing and then im 100% satisfied with my page... well atleast for now... please help me would love all the help i can get.
window.addEventListener('scroll', function(){
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
<!---Sticky navbar---->
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: white;
text-decoration: none;
}
header.sticky ul li a{
color: black;
}
header ul li a::after{
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after{
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a class="active" href="#home" onclick="toggleMenu();">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!--Front page image and text-------------------------------------------------------------------------------------------------------------------------------------------------->
<section class="landing-page" id="home">
You could create the function toggleMenu(element) which adds a class active to the given element and remembers it until the next call. When the function is called the next time it first checks if there is an active menu entry and deactivates it.
Consider the following code:
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
let elActiveAnchor = null;
function toggleMenu(elAnchor) {
elActiveAnchor?.classList.remove('active');
(elActiveAnchor = elAnchor).classList.add('active');
}
toggleMenu(document.getElementById("menu-home"));
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: gray;
text-decoration: none;
}
header.sticky ul li a {
color: black;
}
header ul li a::after {
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after,
/* This is the new selector for the "active" menu entry */
header ul li a.active::after {
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a id="menu-home" href="#home" onclick="toggleMenu(this)">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!-- Front page image and text -->
<section class="landing-page" id="home">

Navigation Menu Not Working on Big Cartel

I have a custom drop-down navigation menu that I want to use on my big cartel theme. It has HTML, CSS and Java Script.
Unfortunately, It is not working. The Java Script helps with the toggle event.
The drop-downs are on "Shop" and "About". When I click those dropdowns, they don't show.
In my Big Cartel Theme, I first tried linking to the JS file -- that didn't work.
I then put the script in the area and it still didn't work.
Here's the code working
https://codepen.io/findingcolors/pen/ZErZZgo
HTML
<div class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><i class="fa-solid fa-bars"></i> Menu</a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Shop <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
All Products
</li>
<li>
Stickers
</li>
<li>
Notepads + Sticky Notes
</li>
<li>
Bookmarks
</li>
<li>
Jewelry
</li>
<li>
Phone Straps
</li>
</ul>
</li>
<li>
About <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
The Brand
</li>
<li>
Shipping + Returns
</li>
<li>
FAQ
</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Cart
</li>
<li>
Search
</li>
</ul>
</nav>
</div>
</div>
CSS
/* --- NAVIGATION bar --- */
.navigation {
height: 50px;
background: #fefcfc;
font-family: "Open Sans", sans-serif;
}
.nav-container {
text-align: center;
margin: 0 auto;
}
nav {
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #fefcfc;
color: #716558;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
color: #90867a;
}
nav ul li ul li {
min-width: 250px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
text-align: left;
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #fefcfc;
height: 50px;
width: 50px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
text-align: left;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: inline-block;
}
}
#nav-toggle {
position: absolute;
left: -160px;
top: 10px;
cursor: pointer;
padding: 10px 35px 16px 0px;
color: #716558;
text-decoration: none;
font-size: 16px;
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Java
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
The jQuery library was missing from the website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
After including it, the navigation menu is working now.

Back button like breadcrumbs in jquery

I am displaying the menu on the left side. As of now, there is no issue with the menu.
Now I am working on the back button. Once the user clicks on the Demo1 -> Demo 1.1 then it will show the Demo 1.1.1, Demo 1.1.2 etc. So I am planning to show back button at the top like
//back
Demo1->Demo 1.1
//dropdown
Demo 1.1.1
Demo 1.1.2
Demo 1.1.3
Demo 1.1.4
Note: My menu is completely dynamic, I don't want to add the static value.
$('.menu-item-has-children .sub-menu').css({
'left': '-320px'
});
$('.menu-item-has-children > a').click(function() {
//alert('hello');
var positionMenu = $(this).parent().attr('id');
//console.log(positionMenu);
$('.menu-item-has-children[id=' + positionMenu + '] > .sub-menu').css({
'left': '0px'
});
var pMenu1 = $(this).text();
console.log(pMenu1);
$('.secondary').prepend(pMenu1);
});
ul {
padding-left: 0;
}
.secondary {
z-index: 99;
background: #f8f8f8;
-webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
-webkit-transition: left 0.2s ease, width 0.2s ease;
transition: left 0.2s ease, width 0.2s ease;
border-right: 1px solid #eaedf1;
position: fixed;
top: 0;
height: 100%;
padding: 12px;
width: 320px;
}
.menu li {
padding-bottom: 10px;
padding-left: 23px;
list-style: none;
}
.menu-item-has-children>a {
position: relative;
display: block;
}
.menu-item-has-children .sub-menu {
width: 100%;
height: 100%;
padding-top: 40px;
background: #f8f8f8;
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: left .3s;
z-index: 10;
}
.menu-item-has-children>a::after {
display: inline-block;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
right: 05px;
top: 0px;
font-size: 12px;
}
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
<div class="secondary">
<ul id="menu-inner-page-menu" class="menu">
<li>Home</li>
<li id="menu-item-204" class="menu-item-has-children">Demo1
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children">Demo 1.1
<ul class="sub-menu">
<li>Demo 1.1.1</li>
<li>Demo 1.1.2</li>
<li>Demo 1.1.2</li>
</ul>
</li>
<li id="menu-item-305">Demo 1.2</li>
<li id="menu-item-306">Demo 1.3</li>
<li id="menu-item-307">Demo 1.4</li>
</ul>
</li>
<li id="menu-item-205" class="menu-item-has-children">Demo2
<ul class="sub-menu">
<li id="menu-item-315">Demo 2.1</li>
<li id="menu-item-316">Demo 2.2</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now I am getting the output in the console.
Also getting the in the HTML view source
Now, How to make the clickable?
Your HTML.
<div class="secondary">
<div id="menu-breadcrumb"></div>
<ul id="menu-inner-page-menu" class="menu">
<li>Home</li>
<li id="menu-item-204" class="menu-item-has-children">Demo1
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children">Demo 1.1
<ul class="sub-menu">
<li>Demo 1.1.1</li>
<li>Demo 1.1.2</li>
<li>Demo 1.1.2</li>
</ul>
</li>
<li id="menu-item-305">Demo 1.2</li>
<li id="menu-item-306">Demo 1.3</li>
<li id="menu-item-307">Demo 1.4</li>
</ul>
</li>
<li id="menu-item-205" class="menu-item-has-children">Demo2
<ul class="sub-menu">
<li id="menu-item-315">Demo 2.1</li>
<li id="menu-item-316">Demo 2.2</li>
</ul>
</li>
</ul>
</div>
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
CSS
ul {
padding-left: 0;
}
.secondary {
z-index: 99;
background: #f8f8f8;
-webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
-webkit-transition: left 0.2s ease, width 0.2s ease;
transition: left 0.2s ease, width 0.2s ease;
border-right: 1px solid #eaedf1;
position: fixed;
top: 0;
height: 100%;
padding: 12px;
width: 320px;
}
.menu li {
padding-bottom: 10px;
padding-left: 23px;
list-style: none;
}
.menu-item-has-children>a {
position: relative;
display: block;
}
.menu-item-has-children .sub-menu {
width: 100%;
height: 100%;
padding-top: 40px;
background: #f8f8f8;
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: left .3s;
z-index: 10;
}
/* select only first child li that has sub menu to top 40 */
.menu > li.menu-item-has-children > .sub-menu {
top: 40px;
}
.menu-item-has-children>a::after {
display: inline-block;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
right: 05px;
top: 0px;
font-size: 12px;
}
/* below is style for menu breadcrumb */
.mbc-link-back {
color: #0066cc;
text-decoration: none;
}
#menu-breadcrumb a + a::before {
color: #222;
content: '>';
cursor: default;
padding: 0 3px;
}
JavaScript (jQuery)
$('.menu-item-has-children .sub-menu').css({
'left': '-320px'
});
var menuBreadcrumb = document.getElementById('menu-breadcrumb');
$('.menu-item-has-children > a').click(function() {
//alert('hello');
var thismenuLi = $(this).parent().attr('id');
let thismenuText = $(this).text();
let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="' + thismenuLi + '">' + thismenuText + '</a>'
menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement);
//console.log(thismenuLi);
$('.menu-item-has-children[id=' + thismenuLi + '] > .sub-menu').css({
'left': '0px'
});
});
// use event delegation to listen click on menu breadcrumb and go back.
$('body').on('click', '.mbc-link-back', function(e) {
e.preventDefault();
// in case user click on the item before last, go back all until the end.
$(this).nextAll().each(function(index) {
mbcGoBack($(this));
});
mbcGoBack($(this));
});
function mbcGoBack(jQThis) {
let menuLiId = jQThis.data('menuItemId');
$('.menu-item-has-children[id=' + menuLiId + '] > .sub-menu').css({
'left': '-320px'// must match from the beginning.
});
jQThis.remove();
}
I was renamed one of your JS variable to make it more understandable, add JS functional, modify CSS a little for top value for only first sub item, add CSS for menu breadcrumb.
See it in action

I have a problem changing menu link colors when scrolling

I am trying to change my navbar link colors when scrolling then if the position at top they have to be with the main color ,
i tried adding and removing classes with jquery but when the first i scroll they change forever else i have to refresh the page
**
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.navba , a:visited').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color: white;
background-color: blue;
margin: auto;
margin-top: 10px;
padding-top: 30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color: black;
margin: auto;
padding-top: 20px;
}
a.color-change {
text-decoration: none;
color: black;
}
/*make sure the content is tall enough to scroll for this example*/
div.content {
min-height: 2000px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="content"></div>
**
It looks like you may just have a typo on the line:
$('.navba , a:visited').removeClass('color-change');
However, a more direct way to undo the changes is to directly target the changed elements:
$('.color-change').removeClass('color-change');
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.color-change').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color: white;
background-color: blue;
margin: auto;
margin-top: 10px;
padding-top: 30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color: black;
margin: auto;
padding-top: 20px;
}
a.color-change {
text-decoration: none;
color: black;
}
/*make sure the content is tall enough to scroll for this example*/
div.content {
min-height: 2000px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="content"></div>
you have missing navbar spelling, please correct it ,please refer the below code it will help you (i have updated your code).
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.navbar , a:visited').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color:white;
background-color: blue ;
margin:auto;
margin-top:10px;
padding-top:30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color:black;
margin:auto;
padding-top:20px;
}
a.color-change {
text-decoration: none;
color:black;
}
.max-height{
height : 100em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class ="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="max-height"> </div>

Categories