Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.
Related
I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.
Here's my example navbar:
<nav class="navbar navbar-expand-xl navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.
const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);
<div id="nav-container"></div>
<nav id="mynav" class="navbar navbar-expand-lg navbar-light sticky-top">
<div id="mainnav" class="container-fluid" >
<a class="navbar-brand pt-0 pb-0" href="index.html">
<img src="./assets/pranav logo1 (1).png" class="img-fluid d-inline-block align-top logo" alt="" loading="lazy">
</a>
<button class="navbar-toggler mr-5" id="mynavbtn" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mob" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item js-scroll-trigger" href="services.html">Web Designing</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Software Development</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Digital Marketing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
var backScroll =window.pageYOffset;
window.onscroll = function (){
var currentScroll = window.pageYOffset;
if(backScroll >currentScroll) {
document.getElementById("mynav").style.top="0";
}else{
document.getElementById("mynav").style.top="-100px";
}
backScroll = currentScroll;
}
});
(Wrong Output)The navbar is hidden (top:-100px)
Expected Output
On desktop code works properly when downward scroll is detected navbar is hidden (top:100px) and when upward scroll is detected navbar will be display but In mobile device When I clicked on hamburger menu it collapse but also hiding logo and hamberger section.
I uploaded please you will get it.
I have a bootstrap side menu that I am making. There are are <li>'s that can be expended and collapsed to display or hide additional menus/links.
Currently when i open the <li> the scroll position of the page is reset back to the top.
I would like the page to maintain its scroll position when the <li> is opened.
This is a snippet:
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-briefcase"></i>
</div>
<div class="sidebar-brand-text mx-3">Business Centre</div>
</a>
<!-- Nav Item - Setting Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseAccount" aria-expanded="true" aria-controls="collapseAccount">
<i class="far fa-user-circle"></i>
<span>Account</span>
</a>
<div id="collapseAccount" class="collapse" aria-labelledby="headingAccount" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="login.html">Membership</a>
<a class="collapse-item" href="login.html">Information</a>
<a class="collapse-item" href="login.html">Contact Us</a>
</div>
</div>
</li>
</ul>
</div>
Can anyone help with the code or point me in the right direction?
Its due to the # you use in href replace it with
href="JavaScript:Void(0);"
like
<a class="nav-link collapsed" href="JavaScript:Void(0);" ...
Second solution
Just use "#/" or "#!" instead of "#" and the page won't jump.
I have a main menu on my site using Bootstrap 4's navbar.
I also have another div (.social-navbar) with some additional menu items that I would like to MOVE from where they are and place INTO the Bootstrap menu on mobiles only. Basically when the menu collapses on mobile, I want the social-navbar items (facebook/twitter icons) and the LOGIN button to appear inside the navbar-nav menu from Bootstrap.
See Codepen Below...
https://codepen.io/anon/pen/KeXZJL
<div class="social-navbar clearfix">
<ul class="social-icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
</ul>
<ul class="login float-right">
<li class="join">Join Now</li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/KeXZJL
Is this possible?
You can add this javascript at the very end of the BODY tag:
<script>
var x = window.matchMedia("(max-width: 465px)")
function mobileMenu(x) {
if (x.matches) {
document.getElementById("navbarMain").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "inherit";
} else{
document.querySelector("body").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "#000";
}
}
mobileMenu(x)
x.addListener(mobileMenu)
</script>
When the screen width is 465px or narrower .social-navbar will be moved into the navbar collapsed menu and its backgroundColor changes to match the collapsed menu.
I am using boostrap 4 drop down menu with tabs inside. Here is the codepin
I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside
But clicking on tabs does not work.
code pin:boostrap 4 tabs inside drop down menu
is there any solution or another approach so that tabs work inside drop down menu
HTML
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul class="navbar-nav">
<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="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab">
–A–
</a>
</li>
<li class="nav-item">
<a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
–B–
</a>
</li>
<li class="nav-item">
<a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
–C–
</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div id="heading-A" class="card-header" role="tab">
<h5 class="mb-0">
<a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div id="heading-B" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div id="heading-C" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
Is there possible solution ?
The simplest way is to wrap it inside a form since the form will prevent the Dropdown from closing on click...
<nav>
...
<li class="nav-item dropdown">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
....
</div>
</form>
</li>
...
</nav>
https://www.codeply.com/go/GzekeuWnSg
The other method is using jQuery to like this:
$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) {
$(this).tab('show');
e.stopPropagation();
});
https://www.codeply.com/go/iEDxVGTzAZ