Develop Reference

Navbar expanded but with one submenu always collapsed

I have a bootstrap navbar which expands at md breakpoint and is made of 2 submenus the collapsing of which is controlled by two buttons with navbar-toggler class.
I want to have my navbar to expand at md but one of my submenu (account) stay always toggled (button that trigger the content show under the navbar).
I'm not experimented with js but I guess it's possible to do it via a script. I've also seen in the source code that when the navbar expand the navbar-toggler get display:none which is a problem.
Here is my navbar and a js script to control the 2 submenus collapse:
$('#links').on('show.bs.collapse', function() {
$('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function() {
$('#links').collapse("hide");
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-light">
<a class="navbar-brand" href="#">MYSITE</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home Page</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
</nav>

This part of your javascript $('#account').collapse() doesn't get executed because the account div is not yet loaded. Wait for it to load then execute the line, like this:
window.onload = function(){
$('#account').collapse();
}
it should do the trick.

$('#links').on('show.bs.collapse', function() {
$('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function() {
$('#links').collapse("hide");
})
$('#account').collapse()
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-light">
<a class="navbar-brand" href="#">MYSITE</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-expand-md" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home Page</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="collapse navbar-toggleable-sm" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
</nav>

Active applying to only one element

I am using jQuery to add active to my menu. It works on the index page, but I can't get it to work on the other pages right now. I've tried changing around the web address to fit the exact location.pathname but that doesn't seem to work, and I tried dropping the \ prior to it as well. Any help would be appreciated.
my markup:
<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
</a>
<button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navToggle">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">Web Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">Graphic Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">SEO & Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/coming-soon.php">Contact Us</a>
</li>
</ul>
</div>
</nav>
and my jQuery:
$(document).ready(function() {
$('.navbar-nav .nav-item a[href="' + this.location.pathname +
'"]').parent().addClass('active');
});
and my website if this helps as well:
http://www.visionary-creatives.com

As I go through your site's view-source page. I see that in remaining pages except for index page these scripts are missing at the end of the page source -
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type ="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>
Please open your browser console and you will see some error over there. So, please add above scripts so that your code will run to every page
Your code is perfect and running as well.

Bootstrap menu disappears onclick on mobile / & header image wont resize

So I spent a few hours trying to solve this myself, with the help of other people's posts but had no luck. Allow me to explain my issues first.
My website, www.discoverbugs.org, has a bootstrap navigation menu. It looks fine on the desktop, but on mobile, the drop-down menu disappears when you click on it. What's causing it and how can I fix it?
The second issue is the header image. On mobile, it expands across the entire width of the phone. I'm having this issue with a lot of images on the site. I tried adding max and min widths and it just won't work for me. Can someone please help me edit this? It looks ridiculous.
CSS:
#media screen and (max-width: 420px) { header {
padding: 65px 0 0px; } }
Index.php
<header class="bg-primary text-white">
<div class="container text-center">
<img src="img/header-v6.jpg">
</div>
</header>
Header.php (Navigation menu)
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Javascript coding I have:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

The reason is simple: Bootstrap 3 JavaScript is not designed to work with Bootstrap 4.
In other words, for Bootstrap 4 css you also need Bootstrap 4 JavaScript (as well as jQuery 3.2.1 and popper.js).
To fix the header image issue add the img-fluid class to the image like so:
<img class="img-fluid" src="img/header-v6.jpg">
This will make the image responsive.
To fix the first issue, use the css and JavaScript files from the following template (and load them in that order):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5 pt-5">
<div class="row">
<div class="col">
<h1>Hello, world!</h1>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Create a sticky header and sticky sidebar? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I would like to have a sticky header and menu #fixedheader and a sticky sidebar #stickySocialIcons. I already tried position:fixed but the problem is that the whole website gets effected...
And regarding the sticky sidebar my problem is that if I use position:fixed the sidebar doesn't stop at the footer with the background and that it doesn't starts to stick to the screen when the screen touches the sidebar. It is always at the same position...
Does anybody has an idea, how I can fix that?
Here the website I am talking about: https://classymagazin.de/home/
Kind regards

This is a some idea for you , think a minuet you can do it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
and look flowing example https://getbootstrap.com/docs/4.0/examples/
learn bootstrap you can make it very easy
https://getbootstrap.com/

Try this css and JQuery for sticky header
#fixedheader {
position: fixed;
width: 100%;
z-index: 9999;
background: #fff;
}
JQuery
$(document).ready(function () {
var sticky = $('#fixedheader');
var height = sticky.height();
$(document.body).css('margin-top', height + "px");
});

Bootstrap 4: Scrollspy isn't working

Im am working on this site right now: https://handyfreak011.github.io/FreetimeElements/.
I already set
body { position: relative;}
And applied
<body id="home" data-spy="scroll" data-target="#main-nav" data-offset="150">
To my body.
That is my nav:
<nav class="navbar main-nav" id="main-nav">
<div class="container">
<button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navibar" aria-controls="navibar" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navibar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#info">START</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#philo">PHILOSOPHIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">KONTAKT</a>
</li>
</ul>
</div>
</div>
</nav>
The ID's of the elements are as in the navigation and if you klick them in the nav, you are sent there. But scrollspy isn't working, the navbar's elements don't change to active when you scroll in the area.
Thanks for you help!