We Keep Coding

how to change color of navbar when scrolling to bottom?

I have 2 probelems.
Problem-1: I am trying changing navbar background color when scrolling to bottom. I am trying to add the class but it couldn't override the bootstrap !important attribute. but I have override it using this line:
nav.scrolled {
background-color: #e8e4e1 !important;
box-shadow: 2px 10px 4px var(--section-bg-light);
}
problem-2: how to change navbar background with javascript while scrolling to the bottom of the page, footer of the page?
let navbar = document.querySelector('.navbar');
let section = document.querySelectorAll('section');
section.addEventListener('mouseover', addIt);
function addIt() {
navbar.classList.remove('bg-transparent');
navbar.classList.add('bg-dark');
}
nav.bg-dark {
background-color: #e8e4e1 !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./img/logo-min.png" alt="JN-Fashion-Zone"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item home">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>

Please check out How to override !important?
You need to use high specificity to override the !important rule.
Try adding more levels to your selector.

var nav = document.querySelector('nav');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
nav.classList.add('bg-info', 'shadow');
} else {
nav.classList.remove('bg-info', 'shadow');
}
});

Can’t Make the navbar in mobile view

<nav class="navbar navbar-expand-md navbar-dark navbar-transparent fixed-top sticky-navigation" id="lambda-navbar">
<div class="header"><img src="images/ssn_logo.png" alt="logo" style="max-width: 15%;position:absolute;left:2.5%;"/><h1></h1></div>
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span data-feather="menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
</ul>
<form class="form-inline">
</form>
</div>
</nav>
I can’t make this in mobile view. If I try to make it responsive, the navbar is not visible in mobile view.

If you don't want your navigation to collapse on mobile just remove the navbar-toggler button and the collapse navbar-collapse classes so your navigation stays visible.

In mobile view there is a collapse class added to nav bar that sets display: none. It gets overridden only above 768px which is why its hidden in small screens
#media (min-width: 768px)
.navbar-expand-md .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
.collapse {
display: none;
}

Fixing navbar to show background colour

Hi guys so i am having a problem on my site were when i resize it to an iphone version it shows some white space on the right side, i fixed this by using this code:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
This works perfectly now and no white space , however my navbar now dosen't show at all because i am using javascript so when the user scrolls the background colour shows , but because i have overflow-x: hidden; it dosen't work at all anymore, so i was wondering how to fix the navbar background showing when using overflow-x: hidden;
HTML:
<nav class="navbar navbar-default navbar-fixed-top" id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
JS:
$(document).ready(function() {
var checkScrollBar = function() {
$('.navbar-default').css({
backgroundColor: $(this).scrollTop() > 1 ?
'rgba(25, 25, 25, 0.84)' : 'transparent'
})
}
$(window).on('load resize scroll', checkScrollBar)
});

Try this if this is what you are after:
$(document).ready(function() {
var checkScrollBar = function() {
$('.navbar-default').css({
backgroundColor: $(this).scrollTop() > 1 ?
'rgba(25, 25, 25, 0.84)' : 'transparent'
})
}
$(window).on('load resize scroll', checkScrollBar)
});
body {margin: 0}
.navbar-default {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
main {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
<main></main>

Can I see the css styles for the '.navbar-default' element? Maybe adding display: block; height: 100px; will fix this issue?

Issues with Bootstrap menu overlapping dropdowns

I have an issue with my two navigation menus. I’m using two of the same type navigation that comes with Bootstrap. The first navigation is using the “navbar-inverse” class and the second navigation menu is using “navbar-default” class with some minor modification. The issue appears when you click on dropdown menu in the right corner; the second navigation menu will overlap the dropdown box and only content below the menu is visible.
Please look at the attachment below for illustration.
This is my current HTML setup:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Hjem</li>
...
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Innstillinger <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav">
...
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
This is my current issue illustrated:
I have created a JSfiddle with corresponding stylesheets and frameworks to look at: http://jsfiddle.net/1L3voL3h/. Unfortunately, at this point I haven't been able to find a solution by myself. Thanks in advance for any help.

change this <nav class="navbar navbar-default navbar-static-top">
to <nav class="navbar navbar-default navbar-static"> from your second nav bar

just add this for your second navbar
<style>
.second-navbar {
top: 50px;
z-index: 999;
}
</style>

You can change the z-index of your navbar-default or of your dropdown menu. Something like:
.navbar-default {
background: #b6d24b;
border-radius: 0px;
z-index: 1;
}
or:
.dropdown-menu {
z-index: 5
}

I updated your JSFiddle
You only need to add to your CSS:
.navbar-inverse.navbar-static-top {
z-index: 800;
}
.navbar-default.navbar-static-top {
z-index: 700;
}
The problem is that you are applying z-index:1000 to both of your navigation bars. With this rule:
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
You should change this rule and/or add the ones I provided above to give your first navigation bar a higher z-index value.

how to create navbar like responsive tab using bootstrap?

how to create navbar like responsive tab using bootstrap?
My requirement is to make tabs that should be responsive like a bootstrap navbar.
I had try like this...
<nav class="navbar navbar-default">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse in" id="bs-example-navbar-collapse-6" style="height: auto;">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
can anyone help....

I found one helpful plugin to do that you can try this responsive tabs
The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Bootstrap uses media queries to change the header based on screen width, so you'll need to use them as well.
When the width is greater than 768px the list items are shown, and anything under that will cause them to be hidden.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="navbar-header">
<a class="navbar-brand">Bootstrap</a>
<div class="navbar-toggle"></div>
</div>
<nav class="navbar navbar-default">
<ul>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
</body>
</html>
CSS
#media (min-width: 768px) {
.navbar li {
float: left;
list-style-type: none;
display: block;
padding: 15px 10px;
}
.navbar-toggle {
display: none;
}
.navbar {
display: block !important;
}
}
.navbar-brand {
display: block;
float: left;
background: #6f5499;
padding: 15px;
}
.navbar-toggle {
position: relative;
float: right;
background-color: #6f5499;
padding: 20px;
}
.navbar {
display: none;
}
See this jsbin.

Try this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is an example jsfiddle of how to create responsive menu in bootstrap.