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
Related
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>
I have the below code (you can see it in a CodePen here, because for some reason the .navbar {position: fixed;} doesn't work in the snippet here), where, when you scroll down, some of the .nav-link CSS attributes have to change. In order to do so, I've added a JS script that adds the .is-scrolled-down class when scrolling down.
However, it seems to only work on the first .nav-link. To make it more visible what's going wrong, I've changed the font color in .nav-link.is-scrolled-down to red.
.nav-link applies to all the links, why doesn't .nav-link.is-scrolled-down?
var navbar = document.querySelector (".navbar");
var navbarlink = document.querySelector (".nav-link");
var navbarbrand = document.querySelector (".navbar-brand");
var IsScrolledDownClass = ("is-scrolled-down");
var ScrollDownClassTreshold = 50;
window.addEventListener ("scroll", function() {
if (!navbar) return;
if (window.scrollY >= ScrollDownClassTreshold) {
navbar.classList.add(IsScrolledDownClass);
navbarlink.classList.add(IsScrolledDownClass);
navbarbrand.classList.add(IsScrolledDownClass);
}
else {
navbar.classList.remove(IsScrolledDownClass);
navbarlink.classList.remove(IsScrolledDownClass);
navbarbrand.classList.remove(IsScrolledDownClass);
}
});
body {
height: 200vh;
}
.navbar {
background-color: #105565;
position: fixed;
width: 100%;
}
.navbar-brand {
color: white;
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 40px;
}
.navbar-brand:hover {
color: white;
}
.navbar-nav {
margin-right: 4.4%;
}
.nav-link {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;
}
.nav-link:hover {
color: #105565;
background: white;
padding-top: 29px;
padding-bottom: 29px;
}
#media (min-width: 1001px) {
.navbar-brand {
padding-left: 67px;
margin-bottom: 3px;
margin-left: 1.9%;
transition: 0.4s;
}
.navbar.is-scrolled-down {
padding-top: 0;
padding-Bottom: 0;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.nav-link.is-scrolled-down {
color: red;
padding-top: 15px;
padding-bottom: 12px;
}
}
#media (max-width: 1000px) {
.navbar-brand {
height: 52px;
line-height: 52px;
padding-top: 0;
padding-bottom: 0;
margin-left: 2.5%;
transition: 0.4s;
}
.fas {
color: rgba(255,255,255,1.00);
}
.nav-link {
margin-top: 15px;
margin-bottom: 14px;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0.4%;
padding-bottom: 0.3%;
height: 40px;
line-height: 40px;
}
.nav-link.is-scrolled-down {
padding-top: 15px;
padding-bottom: 14px;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Navbar learning</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<nav class="navbar navbar-expand-lg m-0 p-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar Inc.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
Using querySelector returns only one of the .nav-link elements, that's why the class is being added to one element.
While querySelectorAll returns all elements that match the selctor. Then you should iterate through the resulting array and add or remove the class
// JavaScript Document
const navbar = document.querySelector(".navbar");
const navbarlink = [...document.querySelectorAll(".nav-link")];
const navbarbrand = document.querySelector(".navbar-brand");
const IsScrolledDownClass = "is-scrolled-down";
const ScrollDownClassTreshold = 50;
addEventListener("scroll", _ => {
if (!navbar) return;
if (scrollY >= ScrollDownClassTreshold) {
navbar.classList.add(IsScrolledDownClass);
navbarbrand.classList.add(IsScrolledDownClass);
navbarlink.forEach(link => link.classList.add(IsScrolledDownClass));
} else {
navbar.classList.remove(IsScrolledDownClass);
navbarbrand.classList.remove(IsScrolledDownClass);
navbarlink.forEach(link => link.classList.remove(IsScrolledDownClass));
}
});
#charset "utf-8";
/* CSS Document */
body {
height: 200vh;
}
.navbar {
background-color: #105565;
position: fixed;
width: 100%;
}
.navbar-brand {
color: white;
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 40px;
}
.navbar-brand:hover {
color: white;
}
.navbar-nav {
margin-right: 4.4%;
}
.nav-link {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;
}
.nav-link:hover {
color: #105565;
background: white;
padding-top: 29px;
padding-bottom: 29px;
}
#media (min-width: 1001px) {
.navbar-brand {
padding-left: 67px;
margin-bottom: 3px;
margin-left: 1.9%;
transition: 0.4s;
}
.navbar.is-scrolled-down {
padding-top: 0;
padding-Bottom: 0;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.nav-link.is-scrolled-down {
color: red;
padding-top: 15px;
padding-bottom: 12px;
}
}
#media (max-width: 1000px) {
.navbar-brand {
height: 52px;
line-height: 52px;
padding-top: 0;
padding-bottom: 0;
margin-left: 2.5%;
transition: 0.4s;
}
.fas {
color: rgba(255, 255, 255, 1.00);
}
.nav-link {
margin-top: 15px;
margin-bottom: 14px;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0.4%;
padding-bottom: 0.3%;
height: 40px;
line-height: 40px;
}
.nav-link.is-scrolled-down {
padding-top: 15px;
padding-bottom: 14px;
}
}
<nav class="navbar navbar-expand-lg m-0 p-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar Inc.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
So I created a navigation menu for a website and it is mobile responsive(CSS Only). However when in responsive mode it converts the menu vertically which is good. I still want the menu to be vertically stacked, however I want it hamburger style for professional reasons. How do I change my responsive menu to be hamburger style? I would like for it to be built with CSS only as well.
I found one example of hamburger style that uses javascript, is it possible to do this with CSS only?
Here is the current responsive menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 charset = "UTF-8>
<title>Responsive Menu</title>
<style>
nav {
list-style-type: none;
margin-left: -9px;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:x-large;
float:left;
padding-bottom:10px
}
nav a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#media screen and (max-width: 700px) {
nav a {
text-align: center;
float: none;
}
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<nav>
<a class="navbar-brand" href="/">
<img src= "logo.png" width="60px" height="50px" class="center" >
</a>
Home
News
example
example2
example
<a style="float:right" href="#form">Form</a>
<a style="float:right" href="#registration">Registration</a>
</nav>
</body>
</html>
And here is a hamburger example that I want my responsive version to look like but I am not sure how to convert:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<nav class="topnav">
<section id="myLinks">
Home
News
example
</section>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</nav>
<main style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</main>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
try this
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
</ul>
</div>
</nav>
I'm new to the laravel environment. I've been working with a navbar and collapsible sidebar, both of them have a dropdown menu. All of a sudden, I changed some styles and now both of them are not working anymore. Any help would be appreciated.
Here are my files:
Layout.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#yield('title')</title>
<!--Bootstrap, Jquery, Pooper, FontAwesome-->
<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">
<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>
<link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
<script src="https://kit.fontawesome.com/942404b945.js" crossorigin="anonymous"></script>
<!--/Bootstrap, Jquery, Pooper, FontAwesome-->
<style>
.dropdown-toggle::after {
content: none;
}
</style>
</head>
<body class="hidden-sn grey-skin">
<!--Double navigation-->
<header>
#include('shared.navbar')
#include('shared.sidebar')
</header>
<!--/.Double navigation-->
<!--Content-->
<main id="main" class="col-lg-12 pt-1">
#yield('content')
</main>
<!--/.Content-->
<!--Scripts-->
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
$(document).on("click",".dropdown-toggle",function(){
$(this).dropdown();
});
</script>
<!--/.Scripts-->
#include('shared.modal-crear')
#include('shared.modal-editar')
<!--Plugins-->
<script src="{{ asset('plugins/jquery/js/jquery.js') }}"></script>
<script src="{{ asset('plugins/bootstrap/js/bootstrap.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
<!--/.Plugins-->
</body>
</html>
navbar.blade.php
<!-- Navbar -->
<nav id="navbar" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg shadow p-2 mb-1 ">
<!-- SideNav slide-out button -->
<div class="float-left pl-2">
<a class="button-collapse"><button type="button" id="sidebarCollapse" onclick="openNav()" class="btn">
<i class="fa fa-bars" aria-hidden="true"></i></button></a>
</div>
</hr>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto px-4">
<a href="/">
<strong id="nav-title">Dimiforms</strong>
</a>
</div>
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item dropdown">
<a id="nav-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-haspopup="true" aria-expanded="false">
#yield('User-name', 'Default') | Usuario
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="">Mi cuenta</a>
<a class="dropdown-item" href="{{ route('usuario_logout')}}">Salir</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
Sidebar.blade.php
<div class="sidebar float-left" id="sidebar">
×
<div class="text-center">
<img src="https://www.w3schools.com/w3images/avatar6.png" class="avatar mx-auto">
<h6>#yield('User-name')</h6>
</div>
<hr>
<div class="items-container">
<a href="cuenta" >
<h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i> | Cuenta</h6>
</a>
<a href="formularios">
<h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i> | Formularios</h6>
</a>
<a href="estadisticas">
<h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i> | Estadisticas</h6>
</a>
<a class="dropdown-toggle dropdown items-container" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target="#sidebar-dropdown">
<h6 class="menu-item"><i class="fas fa-laptop-code"></i> | Dimiforms</h6>
<div class="dropdown-menu" id="sidebar-dropdown" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="{{ route('display_crear_formulario')}}" data-toggle="modal" data-target="#modal-crear">Crear Formulario</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('display_editar_formulario')}}" data-toggle="modal" data-target="#modal-editar">Editar Formulario</a>
</div>
</div>
</a>
<hr>
<a href="about">
<h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i> | Acerca de</h6>
</a>
</div>
styles.css
/*general stuff*/
a {
text-decoration: none !important;
}
/*sidebar*/
#sidebar {
height: 100%;
width: 0;
z-index: -inherit;
position: fixed;
left: 0;
background-color: #2c3e50;
padding: 60px 0 0 0;
top: 55px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 1s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar h6 {
color: rgb(255, 255, 255);
margin-top: 7px;
}
.sidebar a{
padding: 4px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: 0.8s;
background-color: inherit !important;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: #c36618 !important;
}
.items-container{
text-decoration: none;
color: white;
}
.menu-item, .dropdown-item{
padding: 6px 0 10px 20px;
transition: 0.8s;
cursor: pointer;
}
.menu-item:hover{
background-color: white;
color:#2c3e50;
}
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50px 50px 50px 50px;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
}
/*sidebar*/
/*navbar*/
#navbar {
background-color: #c36618;
border: none !important;
height: 60px;
}
#sidebarCollapse{
background-color: transparent;
color: #fafafa;
}
#sidebarCollapse:hover {
background-color: white;
color: #c36618;
}
#nav-title, #nav-dropdown{
color: #ffffff;
}
/*main*/
main{
padding: 0 0 0 25%;
transition: margin-left 1s; /* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
/* Dropdowns */
.dropdown-item{
display: block;
transition: 0.8s;
color: #2c3e50 !important;
background-color: transparent !important;
}
.dropdown-item:hover{
color:#c36618 !important;
}
.dropdown{
width: inherit;
background-color: inherit !important;
border: 0px;
}
/* Modals */
.submit-button{
background-color: #2c3e50;
color:white;
border-radius: 8px;
}
I fixed it by changing the order of the bootstrap, Jquery and main css files.
I had two bootstrap files imported as well.
I want to active/highlight "About" but when i scroll down for some space it become active/highlight. It should show highlighted "About" when i open it in browser. I want to active/highlight "About" when i do not move a scroll bar. "About" should be highlighted. Help me to solve this issue. "About" should be highlighted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:400,900" rel="stylesheet">
<style>
body {
position: relative;
}
ul.nav-pills {
top: 100px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
.bg-1 {
background-color: black;
}
.bg-1 ul li {
color: #ecf0f1;
font-family: 'Gugi', cursive;
font-size: 15px;
}
.bg-2 {
width: 86%;
background-color: #d1d8e0;
}
.col-sm-3 {
width: 14% !important;
background-color: white !important;
}
#media screen and (max-width: 810px) {
#about,
#education,
#certifications,
#skills,
#projects,
#experience,
#interest {
margin-left: 150px;
}
}
#myScrollspy {
position: fixed;
align-self: center;
left: 0;
top: 0;
}
#hello {
font-family: 'Black Han Sans', sans-serif;
font-size: 65px;
margin-left: 150px;
margin-top: 200px;
}
#name {
font-family: 'Montserrat', sans-serif;
font-size: 55px;
font-weight: 600;
margin-left: 150px;
margin-top: 30px;
}
#self {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#engineer {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#intro {
font-family: 'Lora', serif;
font-size: 20px;
color: #d1d8e0;
margin-left: 150px;
margin-top: 15px;
}
hr {
width: 400px;
border-top: 1px solid #4b6584;
border-bottom: 1px solid #4b6584;
}
#education {
margin-top: 300px;
}
#email {
font-size: 10px;
}
#headings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #343a40;
font-weight: 700;
font-size: 50px;
}
#social {
margin-top: -90px;
margin-left: 250px;
}
.image {
margin-left: 20px;
padding: 1px;
}
.subheadings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #20bf6b;
font-weight: 500;
font-size: 40px;
}
#certifications {
margin-top: 350px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
/* background-color: #337ab7; */
background-color: unset !important;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container-fluid">
<div class="row bg-1">
<!-- Left Side Navigation Bar -->
<div class="col-sm-3 text-center" id="backg">
<nav id="myScrollspy">
<ul class="nav nav-pills nav-stacked ">
<img class="img-rounded img-responsive center-block image" src="naqqash.png" height="150" width="150 ">
<li class="active">ABOUT</li>
<li>EDUCATION</li>
<li>CERTIFICATIONS</li>
<li>SKILLS</li>
<li>PROJECTS</li>
<li>EXPERIENCE</li>
<li>INTEREST</li>
</ul>
</nav>
</div>
<!-- Right Side -->
<div class="col-sm-9 bg-2">
<!-- About -->
<div id="about">
<h1 id="hello">hello</h1>
<h3 id="name">I'm Muhammad Naqqash,</h3>
<h3 id="self">a self taught developer.</h3>
<h3 id="engineer">I'm a Computer Engineer. </h3>
<p id="intro">I'm a positive and friendly person. Also, I love to set goals and achieve them.<br> My important qualities: self-motivated, ability overcome difficulties and the <br> ability to learn.</p>
<div id="social">
<a href=""><i class="fab fa-facebook fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<i class="fab fa-linkedin fa-lg"></i> <span style="display:inline-block; width: 0px;"></span>
<i class="fab fa-twitter-square fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<i class="fab fa-github-square fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
</div>
</div>
<!-- education -->
<div id="education">
<h1 id="headings">EDUCATION</h1>
<h3 class="subheadings"><i class="fas fa-graduation-cap fa-sm"></i><span style="display:inline-block; width: 20px;"></span>BS Computer Engineering</h3>
<h3 class="subheadings"><i class="fas fa-university"></i><span style="display:inline-block; width: 20px;"></span>NUST College of E&ME</h3>
</div>
<div id="certifications">
<h1 id="headings">Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="skills">
<h1 id="headings">Section 4</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="projects">
<h1 id="headings">Section 5</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="experience">
<h1 id="headings">Section 6</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="interest">
<h1 id="headings">Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div>
<h1>Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
The margin on your title is pushing the about section down so instead of:
#hello {
margin-top: 200px;
}
You could use:
#about {
padding-top: 200px;
}