Dear community,
I have been trying to find an answer here for my little problem but unfortunately I wasn’t able to. I have been following the Tesla tutorial in your Youtube Channel but apparently the JS Plugin is not working anymore and was only valid until Bootstrap 4.
Is there anybody out there who could support on clarifying whether is there any easy solution for the navbar pushing the content down when we run the website on small devices?
Thanks
No js or css. Html only Bootstrap 5.3.2
<nav class="bg-light navbar navbar-expand-md navbar-light">
<div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button class="navbar-toggler" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"><span class="navbar-toggler-icon"></span></button>
<div id="offcanvasNavbar" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 id="offcanvasNavbarLabel" class="offcanvas-title">Menu</h5><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
I’m not entirely clear on what you mean by the “navbar pushing the content down”. Perhaps you can post a screen shot?
The Tesla Tutorial is rather dated at this point, and many features in Bootstrap Studio have changed since that video was created. If you are following the Tesla tutorial in an effort to learn how to use the program, you should start with a Bootstrap 4 website, as jQuery is no longer supported in Bootstrap 5.
HOWEVER, if you have built your site in Bootstrap 5 and you still need jQuery loaded for certain plug-ins, you can easily enable it by going to the top menu File > Settings and click the dropdown that says jQuery Version and choose one of the versions. This will enable jQuery throughout your entire website. (Typically, you’d use the latest version.)
If you have a multipage website and only need jQuery loaded on a specific page, you could add it by going to the Design panel, right clicking JavaScript > Link External JavaScript and then enter a URL of a CDN where jQuery is hosted (for example, https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
and then right click the script and use the visibility feature to choose on which page(s) you want the library to be loaded.
If you have the offcanvas inside the navbar I don’t think you can open the offcanvas inside BSS to edit the menu.
If the menu links goes to anchor tags on the page the navbar needs to have a fixed position at top or bottom, otherwise the page will scroll to the top the moment you close the offcanvas.
If you want the offcanvas to close when click a menu link you can add this snippet to a javascript file
document.addEventListener(
'DOMContentLoaded',
function () {
'use strict';
const OffcanvasMenu = new bootstrap.Offcanvas('#offcanvasNavbar');
const menuLinks = document.querySelectorAll('.nav-link');
menuLinks.forEach((link) => {
link.addEventListener('click', () => OffcanvasMenu.hide());
});
},
false
);
You can download a component to see how I do it here
You can either do as printninja suggested and add jquery, or use the following javascript instead. (still use the css link in the tutorial
document.addEventListener("DOMContentLoaded", function() {
// Cache frequently used elements
const body = document.body;
const navbar = document.querySelector(".navbar");
const navbarCollapse = document.querySelector(".navbar-collapse");
// Create side menu elements
const sideMenuOverlay = document.createElement("div");
sideMenuOverlay.classList.add("side-menu-overlay");
body.appendChild(sideMenuOverlay);
const sideMenu = document.createElement("div");
sideMenu.id = "side-menu";
body.appendChild(sideMenu);
const closeButton = document.createElement("button");
closeButton.classList.add("btn-close");
sideMenu.appendChild(closeButton);
const contents = document.createElement("div");
contents.classList.add("contents");
sideMenu.appendChild(contents);
// Apply initial classes
if (navbar.classList.contains("better-bootstrap-nav-left")) {
sideMenu.classList.add("side-menu-left");
}
// Define functions for menu visibility
function showMenu() {
body.classList.add("overflow-hidden");
sideMenu.style.display = "block";
setTimeout(() => {
body.classList.add("side-menu-visible");
sideMenuOverlay.style.opacity = 1;
}, 50);
}
function hideMenu() {
body.classList.remove("side-menu-visible");
sideMenuOverlay.style.opacity = 0;
setTimeout(() => {
sideMenu.style.display = "none";
body.classList.remove("overflow-hidden");
}, 400);
}
// Event listeners
navbarCollapse.addEventListener("show.bs.collapse", function(event) {
event.preventDefault();
contents.innerHTML = this.innerHTML;
showMenu();
});
closeButton.addEventListener("click", function(event) {
event.preventDefault();
hideMenu();
});
sideMenuOverlay.addEventListener("click", function(event) {
hideMenu();
});
window.addEventListener("resize", function() {
if (!navbarCollapse.matches(":visible") && body.classList.contains("side-menu-visible")) {
sideMenu.style.display = "block";
sideMenuOverlay.style.opacity = 1;
} else {
sideMenu.style.display = "none";
sideMenuOverlay.style.opacity = 0;
}
});
});
If you click on the offcanvas inside the navbar the menu shows to open or close. Also the Tesla menu is not a one page wonder scrolling menu I dont think ? This is the Tesla nav with offcanvas and no js or css.
<section id="hero" class="d-flex flex-column justify-content-between">
<div id="hero-top">
<nav class="navbar navbar-expand-md bg-body navbar-light">
<div class="container-fluid"><a class="navbar-brand" href="#"></a><button class="navbar-toggler" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"><span class="navbar-toggler-icon"></span></button>
<div id="offcanvasNavbar" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 id="offcanvasNavbarLabel" class="offcanvas-title">Menu</h5><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" href="#">Model S</a></li>
<li class="nav-item"><a class="nav-link" href="#">Model X</a></li>
<li class="nav-item"><a class="nav-link" href="#">Model 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Roadster</a></li>
<li class="nav-item"><a class="nav-link" href="#">Energy</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sign In</a></li>
</ul>
</div>
</div>
</div>
</nav>
<h1 id="title" class="text-center">Tesla</h1>
<h2 id="subtitle" class="text-center">Roadster</h2>
</div>
<div id="hero-bottom">
<div class="container">
<div class="row">
<div class="col-8 offset-2">
<p>The quickest car in the world, with record-setting acceleration, range and performance.</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="p-top"><i class="icon ion-speedometer"></i> 1.9s </p>
<p class="p-bot">0-60 mph </p>
</div>
<div class="col with-borders">
<p class="p-top">+250mph </p>
<p class="p-bot">Top Speed</p>
</div>
<div class="col">
<p class="p-top">620mi </p>
<p class="p-bot">Mile Range</p>
</div>
<div class="col align-self-center"><button class="btn btn-primary d-block reserve-button w-100" type="button">Reserve Now</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-link d-block arrow-button w-100" type="button"><i class="icon ion-ios-arrow-down"></i></button></div>
</div>
</div>
</div>
</section>
Works the same as my first example in Bootstrap 5.3.2
With your code when I highlight the offcanvas and click the show button in the tool bar the offcanvas won’t open inside BSS, because the offcanvas is inside the navbar. It works when you preview or publish
Hmmn might be a bug or something becasue if I drag a navbar and then go drag a offcanvas in it and delete the navbar collapse, I get a small menu on the offcanvas element showing “Offcanvas Show Hide” ? I tried it on another computer and it worked also. Try typing show to manually make it show and that might make your menu toolbar working …got me ? 6.6.1 version
I found it, if the navbar is expanded the offcanvas doesn’t open when click the show button. If I set the viewport smaller so the navbar collapse the you can open the offcanvas inside BSS
Hello there,
Thank you so much for your feedback! This is one of the points I noticed right away because the video was published 5 years ago and I completely understand that is really hard for the developers to keep the tutorials like this always updated. Tech is always changing!
I decided to take one step back and study from the scratch HTML+CSS+JS so I don’t overflow the community with questions like this. It’s not a matter related to the tool but a lack of knowledge in HTML+CSS.
I will try what all of you guys suggested and then get back here! Thanks a lot.
The content push is probably intentional because on mobile if the “Tesla Roadster” text stayed fixed, it would get covered by the nav links. So for the sake of simplicity, they probably just had it get pushed down at all screen sizes. It would not be difficult to make it stay fixed above the mobile screen size by using a bit of CSS and media queries.
When I bought Bootstrap Studio, I actually began learning the program by following this Tesla tutorial. It was quite helpful, but I already had a decent grasp of CSS and HTML from many years of building non-responsive websites. I just needed to become familiar with responsive design, Bootstrap, and the program’s UI.
If I were to buy Bootstrap Studio today, I probably wouldn’t recommend the Tesla video as a way to “dive into” the program because it’s so out of date (unless you actually wanted to build a website in Bootstrap 4x.)
There are probably newer tutorial vids that would be better suited for a new user looking to to “get their feet wet” with Bootstrap Studio. But I must confess, I really haven’t kept up on their YouTube video page. Once I got the hang of the program, I really never watched any of their newer vids.