Develop Reference

Close offcanvas with a button

Trying to close the offcanvas with the close button inside the offcanvas. Right now, I can only close it with the button I opened it with. What did I do wrong? See attached code.
(function mainScript() {
"use strict";
const offcanvasToggle = document.querySelector('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
const offcanvasCollapse = document.querySelector(".offcanvas-collapse");
offcanvasToggle.addEventListener("click", function () {
offcanvasCollapse.classList.toggle("open");
});
})();
.offcanvas-collapse {
position: fixed;
top: 0;
/* Height of navbar */
bottom: 0;
left: 100%;
width: 30%;
padding: 8px 8px;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
<div id="navbar" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>

You need to use querySelectorAll instead of querySelector, because you try to select more then one element and use forEach for apply eventListner to each one like:
(function mainScript() {
"use strict";
const offcanvasToggle = document.querySelectorAll('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
const offcanvasCollapse = document.querySelector(".offcanvas-collapse");
offcanvasToggle.forEach(el => {
el.addEventListener("click", function() {
offcanvasCollapse.classList.toggle("open");
});
});
})();
.offcanvas-collapse {
position: fixed;
top: 0;
/* Height of navbar */
bottom: 0;
left: 100%;
width: 30%;
padding: 8px 8px;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
<div id="navbar" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>

Navbar breaking in responsive mode

I have created a web portfolio for myself. Everything was fine while I was viewing it on my Desktop, but the issue happens when I view it on my phone.
a) The navbar collapses but it is not aligned properly.
b) There is some space on the right side of the viewport on my hero section. I am trying to understand the error but to no avail.
Link to portfolio: https://smammar.netlify.app/
HTML code
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="index.html"><img src="images/logo2.png" alt="logo"
style="width: 130px; height: 130px;"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation" id="responsiveNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- hero area -->
<section class="hero-area bg-primary" id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-white font-tertiary">Hi! I’m <br> Syed Mohammad Ammar <br> Full-Stack Designer</h2>
</div>
</div>
</div>
<div class="layer" id="l2">
<img src="images/illustrations/dots-cyan.png" alt="bg-shape">
</div>
<div class="layer" id="l4">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<div class="layer" id="l6">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
</div>
<div class="layer" id="l9">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
<li class="mb-3"><a class="text-white" href="https://twitter.com/SMAmmar5"><i class="fab fa-github"
id="socialIcons"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-twitter" id="socialIcons1"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-behance" id="socialIcons2"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-linkedin" id="socialIcons3"></i></i></a></li>
</ul>
<!-- /social icon -->
</section>
<!-- /hero area -->
<!-- about -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<p class="font-secondary paragraph-lg text-dark">I'm a full-stack designer based in Karachi, <span style="color: #228B22"> Pakistan </span> with
experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
lives of others by creating human centric products.</p>
<a href="https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf..." class="btn "
id="viewResume">View Resume</a>
</div>
</div>
</div>
</section>
CSS Code
.navigation {
padding: 40px 100px;
transition: .3s ease;
}
.navigation.nav-bg {
background-color: #000
;
padding: 0 70px;
}
#media (max-width: 600px) {
.navigation.nav-bg {
padding: 15px 20px;
}
}
#media (max-width: 600px) {
.navigation {
padding: 20px;
background: #000
;
}
}
.navbar .nav-item .nav-link {
font-family: "BwNistaInt-xBd";
text-transform: uppercase;
padding: 15px;
}
.navbar .nav-item.active {
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover{
border-color: #ffa500;
color: #ffa500;
box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
transition: all 0.2s;
cursor: pointer;
}
.hero-area {
padding: 300px 0 200px;
position: relative;
}
.hero-area h2 {
position: relative;
z-index: 2;
}
.layer {
position: absolute;
z-index: 1;
}
#l1 {
bottom: 0;
left: 0;
}
#l2 {
top: 190px;
left: -250px;
}
#l3 {
top: 200px;
left: 40%;
}
#l4 {
top: 200px;
right: 40%;
}
#l5 {
top: 100px;
right: -150px;
}
#l6 {
bottom: -20px;
left: 10%;
}
#l7 {
bottom: 100px;
left: 20%;
}
#l8 {
bottom: 160px;
right: 45%;
}
#l9 {
bottom: 100px;
right: -10px;
}
.layer-bg {
position: absolute;
bottom: 0;
left: 0;
}

Here's a quick fix. Try to add this into your css this will remove the spacing and improper alignments in responsive mode.
body, html {
overflow-x:hidden;
}

You can remove the header tag & it's class and then add 'fixed-top' class to the nav tag. That might solve the issue.

Hide element if click outside it

What I want is to close the search bar if I click anywhere but the search bar elements (input and submit button). What I made so far is use toggle to open and close it and this is working. But I couldn't find a way so far to close it if I click anywhere outside the div.
Codepen: https://codepen.io/hateusall/pen/abdedJE
HTML:
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x.png" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown " >Lorem Ipsum</li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem Ipsum</li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search"></i></div>
<div class="search-wrapper" >
<form action="#" class="">
<input type="text" placeholder="Search" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
const searchToggler = document.querySelector(".search-toggler");
const searchWrapper = document.querySelector(".search-wrapper");
searchToggler.addEventListener("click", function(e){
if ( !$(event.target).hasClass('search-toggler')) {
$(searchWrapper).toggleClass("search-wrapper-active");
close();
}
});
function close() {
if (!$(event.target).hasClass('search-wrapper-active')) {
$(document).click(function(e){
/* here i would remove active classes */
console.log("test")
})
}
}
}

DEMO
const $toggler = $(".search-toggler");
const $wrapper = $(".search-wrapper");
$toggler.on("click", function() {
$wrapper.toggleClass("search-wrapper-active");
});
$(document).on('click', function (e) {
if ($(".search-toggler, .search-wrapper").has(e.target).length === 0) {
$wrapper.removeClass("search-wrapper-active");
}
});

You can do it like this:
[...document.querySelectorAll('body')].forEach(el => {
//get all elements in body
el.addEventListener('click', event => {
//add addEventListener
if (event.target.className.includes("search") === false) {
//if clicked element does not have class search
searchWrapper.classList.remove("search-wrapper-active");
//remove search-wrapper-active class to close it
}
})
})
And that way you don't need anything else, just combine it together to close it and open (also benefit, using only JS):
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
Keep in mind now:
now you have event listener on all elements on page, if you need it for something else, just expand this to suit your needs, no need to add event listener click again anywhere.
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
html {
height: 100%;
}
body {
min-height: 100%;
}
.search {
cursor: pointer !important;
z-index: 99999;
position: relative;
}
.search-active {
cursor: pointer;
z-index: 99999;
transition: .4s all ease-in-out;
pointer-events: all !Important;
}
.search-input {
z-index: 99999;
}
.search-image {
cursor: pointer;
z-index: 99999;
}
.search-submit {
z-index: 99999999999999999999;
cursor: pointer !important;
position: relative;
pointer-events: all !Important;
}
.toggler-image {
z-index: 9999;
position: relative;
color: #000;
}
.search-input {
border-radius: .2rem;
padding-left: 16px;
z-index: 9;
position: relative;
transition: .3s ease-in-out all;
}
.search-toggler {
z-index: 99;
position: relative;
transition: .3s ease-in-out all;
}
.search-wrapper {
opacity: 0;
pointer-events: none;
transition: .3s ease-in-out all;
position: absolute;
}
.search-wrapper-active {
transform: translateY(35px);
pointer-events: all;
opacity: 1;
transition: .3s ease-in-out all;
}
.btn-search {
position: absolute;
left: 100%;
height: 45px;
width: 50px;
}
header {
background-color: #000;
width: 100vw;
padding: 32px 0px;
}
.pleft {
padding-left: 380px;
}
.custom-cont {
padding-left: 380px;
padding-right: 280px;
}
.pright {
padding-right: 280px;
}
.navbarCustom {
display: flex;
align-items: center;
justify-content: space-between;
}
header li {
color: #fff;
margin-right: 49px;
font-size: 16px;
font-family: var(--mbold);
cursor: pointer;
}
header li:hover {
color: #4aba58;
transition: .3s;
}
header ul {
margin-bottom: 0;
}
.btn-wpp {
background-color: #4aba58;
border: none;
padding: 17px 21px;
font-size: 16px;
color: #fff;
border-radius: .4rem;
transition: .4s;
}
.btn-wpp:hover {
filter: brightness(120%);
transition: .4s;
}
.cart-value {
background-color: var(--verdeClaro);
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
border-radius: 50%;
font-size: 13px;
transform: translate(80%, -80%);
}
.cart-value:hover {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="wrapper">
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown ">Lorem </li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem </li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search">toggler</i> </div>
<div class="search-wrapper">
<form action="#" class="">
<input type="text" placeholder="Pesquisar" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
<li class="cart position-relative">
<div class="cart-value">1</div>
<img src=".//images/carrinho.png" alt="">
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
<h1>TEST
<h1>

Fix navbar elements size when navbar shrinks

I have a fixed-top navbar, i made a function to make it shrink on scroll but i have a problem, the ul class in the navbar is not shrinking properly, i gave it a line height to align it vertically with the navbar-brand but i can't figure out how to fix that when the navbar shrinks, here is my code:
$(document).ready(function(){
var scrollTop = 0;
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
$('.counter').html(scrollTop);
if (scrollTop >= 100) {
$('#global-nav').addClass('scrolled-nav');
} else if (scrollTop < 100) {
$('#global-nav').removeClass('scrolled-nav');
}
});
});
#global-nav{
height: 150px;
-webkit-transition: height .5s, line-height .5s;
transition: height .5s, line-height .5s;
}
.navbar-brand img{
height:95px;
}
.navbar-default .navbar-nav>li>a{
line-height: 95px;
}
.navbar-brand
img{
display: inline-block;
-webkit-transition: all .5s;
transition: all .5s;
}
.scrolled-nav .navbar-brand img{
height: 50px;
}
.scrolled-nav{
height: 100px !important;
line-height: 100px !important;
}
.counter{
width: 20px;
height: 20px;
background: black;
color: #fff;
position: fixed;
top: 120px;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav id="global-nav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand page-scroll" href="#page-top"><img src="http://placehold.it/350x150"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="active"> LINK 1 </li>
<li> LINK 2 </li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Your issue is
.navbar-default .navbar-nav>li>a {
line-height: 95px;
}
You need that to be 70px when small to account for the padding (or remove the padding when small).
Simple answer:
.navbar-default.scrolled-nav .navbar-nav>li>a {
line-height: 70px;
}

This is tricky to replicate using code snippets, but the CSS that is controlling the height of the nav items is this:
.navbar-default .navbar-nav>li>a {
line-height: 95px;
}
Because this code uses line-height to center the text in the nav buttons, this is the property you'll need to adjust the shrink their height.
Alternatively, you can separate line height from the shrinking nav and use padding-top and padding-bottom, and adjust these properties when the scrolled class is added.

Bootstrap search box similar to Google Developers

I can easily create a nav search bar in Bootstrap 3. But I'd like to build something very similar to Google Developers search bar.
I could of course try to look at google's page and factor out the one that pertains to the search box, but with my current css skill that will take me forever.
In particular how would I create a search nav bar in Bootstrap 3 with the following features?
On large screens I need the whole search box to take up whatever remaining width is left (brand and menus on the left, user account button on the right).
On Focus HTML drop down would show similar to Google Developers site.
I'd like the user to have the option to select a filter in the HTML drop down and it would show as a tag in the search bar as shown below:
On smartphone screens the search box will collapse to a search button that when clicked it will expand similar to Google Developers site. (Separate from the collapse of the menus).
I can take care of the JS part (using angular), I just need to have an idea on the css part. I already search this site (http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/), but i'd like to implement this with the bootstrap classes already in place.
Here's what I have so far with a help from Fizzix:
JSFiddle Demo
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Others <span class="sr-only">(current)</span></li>
<li>Categories</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
CSS:
body {
margin: 20px;
background: #455a64;
}
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}

Your question will most likely be closed since you have not tried to do this yourself first and you're basically asking us to do all the hard work without any attempt
I tried to mimic most of the styles, although the placeholder colour is the tricky part. Instead, I added the value of Search to the input and styled the colour. You can handle the placeholder part through Angular instead.
Unfortunately I'm strapped for time at the moment and am unable to get the dropdown working on focus.
If you would like a full breakdown of the CSS, just let me know and I can go through it step by step with you.
WORKING DEMO
CSS:
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
HTML:
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>