Bootstrap 4 Responsive menu - add items on collapse - javascript

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.

Related

How can I create a reusable navbar across multiple HTML pages with Bootstrap 5?

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>

Bootstrap Navbar dropdown not working on mobile

This is a part of code from my nav bar. I am trying to create a dropdown menu, but unfortunately on mobile when i click the toggle instead of showing dropdown it closed . I have tried to update all the stylesheet bootstrap code , and link . i have tried other models on navbar dropdown but the same thing
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="assets/images/mindnmovelogo.png" alt="Logo">
</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="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button>
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul id="nav" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="page-scroll" href="#home">INDUSTRIES</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="#about">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="page-scroll nav-link " href="#" id="navbarDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i>WHAT WE DO</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</li>
<li class="nav-item">
<a class="page-scroll" href="#footer">GET IN TOUCH</a>
</li>
</ul>
</div> <!-- navbar collapse -->
<div class="navbar-btn d-none d-sm-inline-block">
<a class="main-btn" data-scroll-nav="0" href="mailto:">GET A FREE QUOTE</a>
</div>
</nav> <!-- navbar -->

Collapse nav bar when clicked on item in mobile

I have created a landing page for an event. Everything is working fine, but when the navbar is opened in mobile view, it doesn't collapse back when clicked on an item. It stays open covering almost 3/4 of the screen while the page scrolls to the sections finely. I need the nav bar to collapse when an item is clicked.
Here's the HTML for the navbar I've created
<div id="nav-bar" >
<nav class="navbar navbar-expand-lg navbar-light" style="background:#2E935D;">
<img src="assets/images/logonew.png" style="height: 3.35rem; padding-left: 20px;"/> <!-- logo on nav bar-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" d onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#home">Home<span class="sr-only">(current)</span></a></li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#info">Info</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#schedule">Schedule</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#rules">Rules</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#register">Register</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#contact">Contact Us</a> </li>
<li class="nav-item"><a style="color: #fff;" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="https://examplelink.com" target="_blank"><i class="fab fa-facebook" style="font-size:30px;"></i></a></li>
</ul>
</div>
</nav>
</div>
Are there any mistakes or issues in the code? How can I achieve the desired behavior of the navbar?
Thank you in advance.
This worked for me
// Close Bootstrap 3 navbar when a nav item is clicked
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
setTimeout(function () {
$('.navbar-toggle:visible').click();
}, 100);
});
found here. I also had to add a delay.

Navbar fade and show at the same time

Currently I am building a navigation bar using Bootstrap v4 and I found out that the animation during collapsing in responsive view is not right.
Hence, I inspect the specific navigation bar and I found out that the classes (.in and .show) are in the same elements when I toggle the collapsible content.
Is there any solution on it through JavaScript or by overriding CSS?
For your information, here are the inspection of my navigation bar.
https://i.imgur.com/f4R48gv.jpg
TQ.
EDIT :
<nav class="navbar navbar-expand-sm navbar-dark bg-dark top-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 1</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 2</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 3</a></li>
</ul>
<div class="navbar-nav">
<a class="nav-item nav-link px-3" href="#">SIGN IN</a>
<div class="divider"></div>
<a class="nav-item nav-link px-3" href="#">SIGN UP</a>
</div>
</div>
</nav>
Here are the jsfiddle link to the file.
https://jsfiddle.net/Jeffrey_Teoh/4y6n6xt4/11/
you are including bootstrap version 3 on top of your file and bootstrap version 4 at the end of your file... same with jQuery. Scripts should be added only once.

How to make animated toggle menu with effect only on mobile devices?

I am new here and forgive me if this question has already been asked before, but I couldn't find that kind of problem. And at the beginning, sorry for my grammar ;) .
The thing is, that I would like to get toggle menu that slides in from right side, after a click on the "hamburger" icon, but only when the width of the screen is smaller than 576 px. On larger screens, i have a fixed-top navbar, without any effects and that's fine. I am using Bootstrap 4 to build my site. Is it possible to do?
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand pl-md-4" href="index.html">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="navbar-nav pr-md-4">
<li class="nav-item px-md-3">
<a class="nav-link" href="#">link 5</a>
</li>
<li class="nav-item px-md-3">
<a class="nav-link" href="#">link 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link 7</a>
</li>
</ul>
</div>
</div>
</nav>
Best way to do it is create two different navs one for the Bigger screens and one more for smaller screens.And give different functionality based on the ID through JS
<!-- Hide the for large Screen -->
<nav id="jsIdentifer1" class="hidden-md hidden-lg">
your navigation code
</nav>
<!-- Hide the for small Screen -->
<nav id="jsIdentifer2" class="hidden-sm hidden-xs">
your navigation code
</nav>

Categories