Develop Reference

How to create a mobile left menu in Bootstrap?

I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?

change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>

how to add smooth scrool transitions for Bootstrap scroll spy

I have developed single page website and used bootstrap scroll spy when i click on nav item border bottom is not displaying before for this issue
i have added script now there is no issue in this.
But when i click nav link smooth scroll is not working link directly placing to
particular section without smooth scroll please anyone help me on this
Reference : http://floretmedia.net/temp/pbee/
<script>
$(document).ready(function(){
var headerHeight = $('header').innerHeight();
scrollTop: target.offset().top - headerHeight //offset height of header here too.
});
</script>
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active">HOME </li>
<li> FEATURES </li>
<li>PRICING</li>
<li>CONTACT</li>
<li>SIGN UP</li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>

You can try with this one
jQuery(document).ready(function(){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
})

without javascript, add this code in your CSS file
html{
scroll-behavior: smooth;
}

Page jumps while scrolling page vertically

I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

Bootstrap 3 does not collapse navbar on mobile or tablet size

I'm trying to make the navbar collapsible but for some reason it collapse and close its self very fast.
Here is my code:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">
<img class="logo" src="../img/logo.png" /></a>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Library</li>
<li>About</li>
<li>Contact</li>
<li>
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
Log In
</AnonymousTemplate>
<LoggedInTemplate>
<li class="dropdown">Settings<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header"><asp:LoginName ID="HeadLoginName" runat="server" /></li>
<li>Accounts</li>
<li><asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/" /></li>
</ul>
</li>
</LoggedInTemplate>
</asp:LoginView>
</li>
</ul>
</div>
</div>
</div>
Can someone tell me whats the problem with it?

Change your "button" to a "div" tag this will prevent a post back from happening.

Bootstrap navbar dropdown not working in mobile

I'm having an issue where a dropdown menu in my navbar works on a desktop, but doesn't expand in mobile.
Here is the live site: http://launchsummer.org/
If you shrink the page to mobile-sized, you'll see that the "launch summer" dropdown does not expand.
Here is the code for the navbar:
<!-- Navigation -->
<!-- Note: navbar-default and navbar-inverse are both supported with this theme. -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="[[~1]]">
<img src="assets/logo-nav#2x.png" class="img-responsive" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
Home
</li>
<li>
About Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Launch Summer <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><font color="#080A21">Program Details</font></li>
<li><font color="#080A21">FAQ</font></li>
<li><font color="#080A21">Launch Alumni</font></li>
<li><font color="#080A21">Past Companies</font></li>
<li role="separator" class="divider"></li>
<li><font color="#080A21">Apply!</font></li>
</ul>
</li>
<li>
LaunchX
</li>
<li>
Launch Clubs
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>

In your vitality.js, at line 23 to 26, you have this function :
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
So when we click on any item, the menu is closed. You can do this to prevent the menu from closing when you click on a dropdown menu.
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li:not(.dropdown) a').click(function() {
$('.navbar-toggle:visible').click();
});

so dropdown Opened but Same time Closing beCaUse inside Link have href="#" delete dropdown Child a elements href attribute