Hey friends whats up............!
I am building this website using bootstrap 5 and I do have a navbar toggler on it........!
Its working fine but I do want it do fill the full width of screen when toggled.........!
Tried some stuff but could not do it. Here is my code. I appreciate any help................!
/***** Top menu *****/
.navbar {
background: #000;
transition: all .6s;
backface-visibility: hidden;
height: 88px;
}
.navbar.navbar-no-bg {
background: rgba(0, 0, 0);
}
.navbar-dark .navbar-nav {
font-size: 15px;
color: #fff;
font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
color: rgba(255, 255, 255, 1);
border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
outline: 0;
}
.navbar-brand {
width: 136px;
background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
border: 0;
margin-left: 60px;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.navbar-nav {
background: rgba(0, 0, 0);
padding-top: 24px;
margin-right: 70px;
padding-bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#top-content">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#about-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#portfolio">FAQ</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
You need to remove the container class OR move it up (in example) so it encapsulates all of your nav. Not sure where this came from, but it appears to be a design choice to have the collapse smaller. But this will fix it.
/***** Top menu *****/
.navbar {
background: #000;
transition: all .6s;
backface-visibility: hidden;
height: 88px;
}
.navbar.navbar-no-bg {
background: rgba(0, 0, 0);
}
.navbar-dark .navbar-nav {
font-size: 15px;
color: #fff;
font-weight: 600;
margin: 0 auto;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
color: rgba(255, 255, 255, 1);
border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
outline: 0;
}
.navbar-brand {
width: 136px;
background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
border: 0;
margin-left: 60px;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.navbar-nav {
background: rgba(0, 0, 0);
padding-top: 24px;
margin-right: 70px;
padding-bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
<a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#top-content">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#about-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#portfolio">FAQ</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
So when the default color for my Nav items is black. Now i'm trying to use my css to change the color to white but it isn't working. bothe the nav brand and the nav links
could it be the scripts on the page affecting it? if not how do i change the default bootstrap css settings
.navbar{
padding: 20px 0px;
box-shadow: none;
background-color: transparent;
}
.navbar-brand{
font-size: 28px;
font-weight: 700;
color: #3a3a3a;
}
.navbar .navbar-expand-md .navbar-nav .nav-link{
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link::before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 0px;
height: 2px;
background: #ffffff;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
width: 40px;
}
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#page-top">Otikes Fitness</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The problem is with the CSS selector. Instead of .navbar .navbar-expand-md .navbar-nav .nav-link it should be .navbar.navbar-expand-md .navbar-nav .nav-link because .navbar-expand-md isn't a child of .navbar, it's the same element.
.navbar.navbar-expand-md .navbar-nav .nav-link {
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
Im tried to added bootstrap 4 my sample project to right side background , I have some conflict on this, i tried to put it right side , its not working, anyone know how to do that correctly
Thanks
// Navbar scroll js //
jQuery(function($) {
"use strict";
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top;
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
// Collapse navbar on click
$(document).on('click.nav','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).removeClass('in').addClass('collapse');
}
});
/*-----------------------------------
----------- Scroll To Top -----------
------------------------------------*/
$(window).on('scroll', function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').on('click', function () {
$('#back-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
/* ------ jQuery for Easing min -- */
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 54
});
});
/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --- Font Styles ---*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat';
font-size: 16px;
}
p {
font-family: 'Montserrat';
font-size: 14px;
}
/*------ Navbar Styling ------*/
.navbar {
font-family: sans-serif;
padding-top: 25px;
padding-bottom: 25px;
background-color: transparent !important;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.navbar .navbar-brand {
font-size: 1.1rem;
font-weight: 600;
color: #563D7C;
}
.navbar .navbar-toggler {
border: none;
}
.navbar span.navbar-toggler-icon::before {
outline: none;
}
.navbar .navbar-toggler:focus {
outline: none;
}
.navbar-nav {
text-align: center;
margin-top: 15px;
-webkit-transition: 0.5s all ease; /* For Safari 3.1 to 6.0 */
transition: 0.5s all ease;
}
.navbar-nav .nav-item {
margin-right: 0;
margin-top: 1.5rem;
font-size: 0.85rem;
font-weight: 400;
text-transform: capitalize;
color: #563D7C;
}
.navbar-nav .nav-item .nav-link {
color: #563D7C;
font-weight: 500;
}
.nav-white .nav-item .nav-link {
font-size: 0.9rem;
text-transform: capitalize;
color: #FFFFFF;
}
.nav-white .nav-item .nav-link:hover {
color: #F1F1F1;
}
.nav-white .navbar-brand {
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.navbar {
background: rgba(255, 255, 255, 0.99) !important;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-white .navbar-brand {
color: #4957B8;
}
.nav-white .nav-item .nav-link {
color: #4957B8;
}
}
#media only screen and (min-width: 240px) {
.navbar.past-main {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.99) !important;
-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
}
.navbar.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-white.past-main .nav-item .nav-link {
color: #4957B8;
font-weight: 500;
}
.navbar.past-main .nav-item .nav-link {
font-weight: 500;
}
.nav-white.past-main .navbar-brand {
color: #4957B8;
}
.nav-white.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*----------------------------------------------------------
--------------- 3. Hero Home Styling Starts -------------------
----------------------------------------------------------*/
.home-section h4 {
font-family: 'Open Sans';
font-size: 12px;
font-weight: 500;
color: #b2bcc1;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 20px;
}
.home-section img {
margin-top: 50px;
}
.hero-home h1 {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.home-section h1 {
font-size: 28px;
font-weight: 700;
color: #364655;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-home p {
font-size: 14px;
font-weight: 300;
color: #EFEFEF;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
.home-section p {
font-size: 14px;
font-weight: 300;
color: #627382;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
/*---------- home-section Styling --------------- */
.home-section {
padding: 100px 0 50px 0 !important;
background:#4529f9 ;height: 100vh;
min-height: 40rem;
padding-top: 72px;
padding-bottom: 0;
}
.home-section .home-content {
text-align: center;
}
/*-----------------------------------------------------------------
------------------ Media Queries -------------------
-----------------------------------------------------------------*/
#media only screen and (min-width: 767px) {
.navbar-nav {
margin-top: 0;
}
.navbar-nav .nav-item {
margin-top: 0;
margin-right: 15px;
font-size: 0.85rem;
font-weight: 400;
}
.home-split .home-left {
padding: 200px 20px 150px 20px;
}
.home-section {
padding: 150px 0 150px 0 !important;
}
.home-section.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
}
.banner-one {
width: 100%;
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
height: 880px;
position: relative;
overflow: hidden;
background-size: 68%;
background-position: top right;
}
<!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">
<title>Landing Page</title>
<!-- Bootstrap , Main CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome kit -->
<script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>
</head>
<body>
<!---Nav bar section--->
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!---End of Nav bar section--->
<!---Home section--->
<div id="main" class="main">
<div class="home-land home-section">
<div class="container">
<div class="row align-center">
<div class="col-md-6 col-lg-6">
<div class="home-content">
<h4>Label for your big data needs</h4>
<h1>Manage all your data at just one place</h1>
<p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
<div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
<form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
<input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
</form>
<div id="response"></div>
</div>
<div class="form-note">
<p>14-day free trial and no credit card required.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 offset-lg-1">
<img src="http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png" class="banner-one">
</div>
<div class=""></div>
</div>
</div>
</div>
<!---End of Home section--->
</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>
I removed image and added banner class to root div.
Changed also banner class to:
.banner-one {
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
// Navbar scroll js //
jQuery(function($) {
"use strict";
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top;
// on scroll,
$(window).on('scroll', function() {
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
// Collapse navbar on click
$(document).on('click.nav', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).removeClass('in').addClass('collapse');
}
});
/*-----------------------------------
----------- Scroll To Top -----------
------------------------------------*/
$(window).on('scroll', function() {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').on('click', function() {
$('#back-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
/* ------ jQuery for Easing min -- */
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 54
});
});
/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --- Font Styles ---*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat';
font-size: 16px;
}
p {
font-family: 'Montserrat';
font-size: 14px;
}
/*------ Navbar Styling ------*/
.navbar {
font-family: sans-serif;
padding-top: 25px;
padding-bottom: 25px;
background-color: transparent !important;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.navbar .navbar-brand {
font-size: 1.1rem;
font-weight: 600;
color: #563D7C;
}
.navbar .navbar-toggler {
border: none;
}
.navbar span.navbar-toggler-icon::before {
outline: none;
}
.navbar .navbar-toggler:focus {
outline: none;
}
.navbar-nav {
text-align: center;
margin-top: 15px;
-webkit-transition: 0.5s all ease;
/* For Safari 3.1 to 6.0 */
transition: 0.5s all ease;
}
.navbar-nav .nav-item {
margin-right: 0;
margin-top: 1.5rem;
font-size: 0.85rem;
font-weight: 400;
text-transform: capitalize;
color: #563D7C;
}
.navbar-nav .nav-item .nav-link {
color: #563D7C;
font-weight: 500;
}
.nav-white .nav-item .nav-link {
font-size: 0.9rem;
text-transform: capitalize;
color: #FFFFFF;
}
.nav-white .nav-item .nav-link:hover {
color: #F1F1F1;
}
.nav-white .navbar-brand {
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.navbar {
background: rgba(255, 255, 255, 0.99) !important;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-white .navbar-brand {
color: #4957B8;
}
.nav-white .nav-item .nav-link {
color: #4957B8;
}
}
#media only screen and (min-width: 240px) {
.navbar.past-main {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.99) !important;
-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
}
.navbar.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-white.past-main .nav-item .nav-link {
color: #4957B8;
font-weight: 500;
}
.navbar.past-main .nav-item .nav-link {
font-weight: 500;
}
.nav-white.past-main .navbar-brand {
color: #4957B8;
}
.nav-white.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*----------------------------------------------------------
--------------- 3. Hero Home Styling Starts -------------------
----------------------------------------------------------*/
.home-section h4 {
font-family: 'Open Sans';
font-size: 12px;
font-weight: 500;
color: #b2bcc1;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 20px;
}
.home-section img {
margin-top: 50px;
}
.hero-home h1 {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.home-section h1 {
font-size: 28px;
font-weight: 700;
color: #364655;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-home p {
font-size: 14px;
font-weight: 300;
color: #EFEFEF;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
.home-section p {
font-size: 14px;
font-weight: 300;
color: #627382;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
/*---------- home-section Styling --------------- */
.home-section {
padding: 100px 0 50px 0 !important;
background: #4529f9;
height: 100vh;
min-height: 40rem;
padding-top: 72px;
padding-bottom: 0;
}
.home-section .home-content {
text-align: center;
}
/*-----------------------------------------------------------------
------------------ Media Queries -------------------
-----------------------------------------------------------------*/
#media only screen and (min-width: 767px) {
.navbar-nav {
margin-top: 0;
}
.navbar-nav .nav-item {
margin-top: 0;
margin-right: 15px;
font-size: 0.85rem;
font-weight: 400;
}
.home-split .home-left {
padding: 200px 20px 150px 20px;
}
.home-section {
padding: 150px 0 150px 0 !important;
}
.home-section.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
}
.banner-one {
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<!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">
<title>Landing Page</title>
<!-- Bootstrap , Main CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome kit -->
<script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>
</head>
<body>
<!---Nav bar section--->
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!---End of Nav bar section--->
<!---Home section--->
<div id="main" class="main">
<div class="home-land home-section banner-one">
<div class="container">
<div class="row align-center">
<div class="col-md-6 col-lg-6">
<div class="home-content">
<h4>Label for your big data needs</h4>
<h1>Manage all your data at just one place</h1>
<p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
<div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
<form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
<input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
</form>
<div id="response"></div>
</div>
<div class="form-note">
<p>14-day free trial and no credit card required.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 offset-lg-1">
</div>
<div class=""></div>
</div>
</div>
</div>
<!---End of Home section--->
</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>
I put the banner-one class with 'home-land home-section' div , now it's working
// Navbar scroll js //
jQuery(function($) {
"use strict";
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top;
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
// Collapse navbar on click
$(document).on('click.nav','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).removeClass('in').addClass('collapse');
}
});
/*-----------------------------------
----------- Scroll To Top -----------
------------------------------------*/
$(window).on('scroll', function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').on('click', function () {
$('#back-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
/* ------ jQuery for Easing min -- */
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 54
});
});
/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --- Font Styles ---*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat';
font-size: 16px;
}
p {
font-family: 'Montserrat';
font-size: 14px;
}
/*------ Navbar Styling ------*/
.navbar {
font-family: sans-serif;
padding-top: 25px;
padding-bottom: 25px;
background-color: transparent !important;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.navbar .navbar-brand {
font-size: 1.1rem;
font-weight: 600;
color: #563D7C;
}
.navbar .navbar-toggler {
border: none;
}
.navbar span.navbar-toggler-icon::before {
outline: none;
}
.navbar .navbar-toggler:focus {
outline: none;
}
.navbar-nav {
text-align: center;
margin-top: 15px;
-webkit-transition: 0.5s all ease; /* For Safari 3.1 to 6.0 */
transition: 0.5s all ease;
}
.navbar-nav .nav-item {
margin-right: 0;
margin-top: 1.5rem;
font-size: 0.85rem;
font-weight: 400;
text-transform: capitalize;
color: #563D7C;
}
.navbar-nav .nav-item .nav-link {
color: #563D7C;
font-weight: 500;
}
.nav-white .nav-item .nav-link {
font-size: 0.9rem;
text-transform: capitalize;
color: #FFFFFF;
}
.nav-white .nav-item .nav-link:hover {
color: #F1F1F1;
}
.nav-white .navbar-brand {
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.navbar {
background: rgba(255, 255, 255, 0.99) !important;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-white .navbar-brand {
color: #4957B8;
}
.nav-white .nav-item .nav-link {
color: #4957B8;
}
}
#media only screen and (min-width: 240px) {
.navbar.past-main {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.99) !important;
-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
}
.navbar.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-white.past-main .nav-item .nav-link {
color: #4957B8;
font-weight: 500;
}
.navbar.past-main .nav-item .nav-link {
font-weight: 500;
}
.nav-white.past-main .navbar-brand {
color: #4957B8;
}
.nav-white.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*----------------------------------------------------------
--------------- 3. Hero Home Styling Starts -------------------
----------------------------------------------------------*/
.home-section h4 {
font-family: 'Open Sans';
font-size: 12px;
font-weight: 500;
color: #b2bcc1;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 20px;
}
.home-section img {
margin-top: 50px;
}
.hero-home h1 {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.home-section h1 {
font-size: 28px;
font-weight: 700;
color: #364655;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-home p {
font-size: 14px;
font-weight: 300;
color: #EFEFEF;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
.home-section p {
font-size: 14px;
font-weight: 300;
color: #627382;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
/*---------- home-section Styling --------------- */
.home-section {
padding: 100px 0 50px 0 !important;
background:#4529f9 ;height: 100vh;
min-height: 40rem;
padding-top: 72px;
padding-bottom: 0;
}
.home-section .home-content {
text-align: center;
}
/*-----------------------------------------------------------------
------------------ Media Queries -------------------
-----------------------------------------------------------------*/
#media only screen and (min-width: 767px) {
.navbar-nav {
margin-top: 0;
}
.navbar-nav .nav-item {
margin-top: 0;
margin-right: 15px;
font-size: 0.85rem;
font-weight: 400;
}
.home-split .home-left {
padding: 200px 20px 150px 20px;
}
.home-section {
padding: 150px 0 150px 0 !important;
}
.home-section.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
}
.banner-one {
width: 100%;
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
height: 880px;
position: relative;
overflow: hidden;
background-size: 68%;
background-position: top right;
}
<!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">
<title>Landing Page</title>
<!-- Bootstrap , Main CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome kit -->
<script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>
</head>
<body>
<!---Nav bar section--->
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!---End of Nav bar section--->
<!---Home section--->
<div id="main" class="main">
<div class="home-land home-section banner-one">
<div class="container">
<div class="row align-center">
<div class="col-md-6 col-lg-6">
<div class="home-content">
<h4>Label for your big data needs</h4>
<h1>Manage all your data at just one place</h1>
<p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
<div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
<form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
<input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
</form>
<div id="response"></div>
</div>
<div class="form-note">
<p>14-day free trial and no credit card required.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 offset-lg-1">
</div>
<div class=""></div>
</div>
</div>
</div>
<!---End of Home section--->
</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>
I have designed a one page with html and css, and placed a navbar which I finded in internet when I click in one navbar item its work perfectly, it scrolling to another section, but when I click in again to go back or to go to another section it does not work!
I do not know jquery, but can I add another js if links work?
here is the HTML
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#myVideo"><img src="img/acp logodarker.png"></img></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#myVideo">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://ws.onehub.com/workspaces/1188704/signin">INVESTOR LOGIN</a>
</li>
</ul>
</div>
</div>
</nav>
jquery
/*!
* Start Bootstrap - Agency v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/agency)
* Copyright 2013-2018 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
*/
!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=a(this.hash);if((o=o.length?o:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:o.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var o=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};o(),a(window).scroll(o),a(".portfolio-modal").on("show.bs.modal",function(o){a(".navbar").addClass("d-none")}),a(".portfolio-modal").on("hidden.bs.modal",function(o){a(".navbar").removeClass("d-none")})}(jQuery);
css
#mainNav {
background-color: white; }
#mainNav .navbar-toggler {
font-size: 12px;
right: 0;
padding: 13px;
text-transform: uppercase;
color: white;
border: 0;
background-color: #293246;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; }
#mainNav .navbar-brand {
color: #EC9C3F;
font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, cursive; }
#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
color: #EC9C3F; }
#mainNav .navbar-nav .nav-item .nav-link {
font-size: 90%;
font-weight: 400;
padding: 0.75em 0;
letter-spacing: 1px;
color: #293246;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; }
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
/* Active navbar */
color: #000; }
#mainNav img {
height: 52px;
width: auto; }
#media (min-width: 992px) {
#mainNav {
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
transition: padding-top 0.3s, padding-bottom 0.3s;
border: none;
background-color: transparent;
background-color: rgba(248, 249, 250, 0.5); }
#mainNav .navbar-brand {
font-size: 1.75em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }
#mainNav .navbar-nav .nav-item .nav-link {
padding: 1.1em 1em !important; }
#mainNav.navbar-shrink {
color: white;
padding-top: 0;
padding-bottom: 0;
background-color: #293246; }
#mainNav.navbar-shrink .navbar-brand {
font-size: 1.25em;
padding: 12px 0; }
#mainNav.navbar-shrink .nav-item .nav-link {
color: white; }
#mainNav.navbar-shrink .nav-item .nav-link.active, #mainNav.navbar-shrink .nav-item .nav-link:hover {
color: #EC9C3F;
background-color: #293246; } }
Here is the jqyery
! function(a) {
"use strict";
a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var o = a(this.hash);
if ((o = o.length ? o : a("[name=" + this.hash.slice(1) + "]")).length) return a("html, body").animate({
scrollTop: o.offset().top - 54
}, 1e3, "easeInOutExpo"), !1
}
}), a(".js-scroll-trigger").click(function() {
a(".navbar-collapse").collapse("hide")
}), a("body").scrollspy({
target: "#mainNav",
offset: 54
});
var o = function() {
a("#mainNav").offset().top > 100 ? a("#mainNav").addClass("navbar-shrink") : a("#mainNav").removeClass("navbar-shrink")
};
o(), a(window).scroll(o), a(".portfolio-modal").on("show.bs.modal", function(o) {
a(".navbar").addClass("d-none")
}), a(".portfolio-modal").on("hidden.bs.modal", function(o) {
a(".navbar").removeClass("d-none")
})
}(jQuery);
I am using Bootstrap 4.
How would I display a search input once the sticky nav locks in-place and remove it when it is not locked in place? I want it to be displayed on the right-hand side of the nave.
I figure this would need to be done with Jquery but I am not a frontend guy so this way above my design capabilities.
Take a look at the site it's up at www.pricereference.com.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
}
img {
max-width: 100%;
}
.btn {
background-color: #D84728;
border-color: #D84728;
color: white;
}
.btn-success {
background-color: #D84728;
border-color: #D84728;
color: white;
}
.btn-price-reference {
background-color: #3cc390;
border-color: #3cc390;
color: white;
}
.top-header {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: lightgrey;
}
.search-box {
padding-top: .3rem;
}
.navbar {
background-color: #0064b2;
margin-bottom: .5rem;
}
.nav-item a {
color: white;
font-family: 'Asul', sans-serif;
font-size: 1.2rem;
}
/* Home Page */
.list-group-item:first-child {
border-top-right-radius: 0rem;
border-top-left-radius: 0rem;
background-color: #3acfef;
color: white;
}
.list-group-item:first-child h1 {
color: white;
font-size: 2rem;
font-family: 'Kavoon', cursive;
}
.list-group-item {
font-family: 'Asul', sans-serif;
}
.list-group-item-action:focus,
.list-group-item-action:hover {
background-color: #D84728;
color: white;
}
.img-fluid {
max-height: 320px;
}
.carousel-caption h3 {
color: #3cc390;
font-family: 'Asul', sans-serif;
}
.carousel-caption h4 {
color: #3cc390;
font-family: 'Asul', sans-serif;
}
.carousel-indicators li {
background-color: #D84728;
}
.best-sellers {
padding-top: 1.2rem;
}
.best-sellers h2 {
color: #3cc390;
font-family: 'Kavoon', cursive;
}
.popular-products {
padding-bottom: 1.2rem;
}
.product-title {
color: #8F8F8E;
font-family: 'Asul', sans-serif;
}
/*bottom */
.bottom_space {
margin-bottom: 1em;
}
.detail-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
.social-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
/* footer */
footer {
background-color: #8F8F8E;
min-height: 350px;
font-family: 'Open Sans', sans-serif;
bottom: 0;
}
.footerleft {
margin-top: 50px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #D84728;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{% block description %}{% endblock %}">
<meta name="keywords" content="{% block keywords %}{% endblock %}" />
<meta name="google-site-verification" content="qgjJmLV5Fd901rWTMqI3oL119zWfarqGqkfPjvnwATk" />
<meta name="msvalidate.01" content="1960AF70A1C1582C7B84ECFF511B758A" />
<link href="https://fonts.googleapis.com/css?family=Kavoon" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asul" rel="stylesheet">
<script src="https://use.fontawesome.com/9bb4a99f3b.js"></script>
<link rel="icon" href="../../favicon.ico">
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static " css/bootstrap.min.css " %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static " css/starter-template.css " %}" rel="stylesheet">
</head>
<body>
<header class="top-header">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://stackedservers.com/cdn/PRICE_REFERENCE.png">
</div>
<div class="col-md-6 text-center search-box">
<form method='GET' action='{% url "home" %}' class="form-inline my-2 my-lg-0">
<div class="input-group input-group-lg">
<input class="form-control form-control-lg" type="text" placeholder="Search" type='text' name='q' placeholder='Search For Products' value='{{ request.GET.q }}' />
<button class="btn" type="submit">Search</button>
</div>
</form>
</div>
</div>
</header>
<nav class="navbar sticky-top navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" 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="{% url " home " %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:best_sellers " %}">Best Sellers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:products_all " %}">All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:all_categories " %}">All Categories</a>
</li>
</ul>
</div>
</nav>
Here is example code of how you can achieve similar feature to reference website.
$(document).ready(function () {
var $menu = $('#navbar-main');
var menuOffsetY = $menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= menuOffsetY) {
$menu.addClass('fixed-top');
} else {
$menu.removeClass('fixed-top');
}
}
document.onscroll = scroll;
});
body{
min-height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="col-8">
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<nav id="navbar-main" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>Hello World</h1>
<footer id="footer" class="footer">
<p class="text-center"><br>This is my big footer, only test. :)</p>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
You can check the output in full screen here https://output.jsbin.com/goqaded