I can see the navbar however when I click it to have dropdown it is not responding.
<!-- Navbar -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<!-- Logo -->
My name
</a>
<!-- collapse when screen get small -->
<button type="button" class="navbar-toggler" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!-- ml-auto: Setting navbar to right -->
<ul class="nav navbar-nav ml-auto">
<!-- active class makes current location brighter -->
<li class="nav-item">
<!-- #home goes to <div id="home"> -->
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about_me">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#References">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
I am using bootstrap4 and all the classes are from bootstrap. Thanks in advance!
HTML/CSS looks good. Make sure you're including jQuery, poppper.js and bootstrap.js in that order or else any functionality that depends on it will not work.
Pasted it into this codepen and it works fine.
Related
I'm trying to create collapse using bootstrap and I also connected "data-target" and "id" which is navbarResponsive. I'm not sure what's wrong here.
This is my code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
Please make sure your Jquery & bootstrap.js file is correctly linked with the project.
Make sure you import JQuery before bootstrap. The same example is working with the following linking:
<!-- first jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- then bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<!-- css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
Header
<div class="col">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" th:href="#{/}">
<img alt="Site Logo" height="50" th:src="#{images/logo8.png}" />
</a>
<button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar.#search">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collatpse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav">
<!--- dynamic header ends -->
<th:block sec:authorize="!isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="#{/login}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="#{/register}">Register</a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" th:href="#{/contact}">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
footer:
<div class="col">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-targer="#main" >
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="mainFooterNavbar">
<ul class="navbar-nav">
<th:block th:each="footerMenu : ${footerMenuItems}">
<li class="nav-item">
<a class="nav-link" th:href="#{'/m/' + ${footerMenu.alias}}">[[${footerMenu.name}]] </a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" th:href="#{/about}">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="#{/registerCompany}">Register your Business?</a>
</li>
</ul>
</div>
</nav>
</div>
Using bootstrap 4.
Header and footer links are not displaying on mobile devices but work fine on laptop/desktop.
If you look at the below image and see the highlighted(squared in image) button nothing happens on the footer and no links are displayed. The links are displayed on the header but again selecting the toggle nothing happens.
Your data target is not set correctly for the header, you have it set to the wrong element.
This line
<button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar.#search">```
should be:
``` <button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar">
The footer looks wrong also. You are toggling on an element id that does not exist.
I have searched a lot, but havent found a simple solution for the problem.
When you click the button it opens and do not close again, any suggestion of what can be missing? Thanks in advance
<nav class="navbar navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="midia/logo.jpg" alt="Tutto Piccolo">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarResponsive" >
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sobre">Sobre a Tutto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#colecao">Coleção</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contato">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cliente">Área do Cliente</a>
</li>
</ul>
</div>
</div>
</nav>
In Bootstrap Docs, it states that
Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
So, change <nav class="navbar navbar-expand-md sticky-top"> to <nav class="navbar sticky-top">
JSfiddle example.
I am working on a website, what I want to achieve is that the navbar of my page stacked over the slider.
I have tried z-index property.
My HTML Code:
<nav class="navbar navbar-expand-md bg-danger navbar-dark sticky-top container custom-navi" style="z-index: 2">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</div></nav>
What I want to achieve is shown in the below image :
What I have right now is :
Bootstrap 4 has class the fixed-top for this purpose.
<nav class="navbar navbar-expand-md bg-danger navbar-dark fixed-top custom-navi">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</div></nav>
The fixed-top answer by ZimSystem is a good one, but in the event that you don't want the position to be fixed, you could set the navbar to be absolute. Bootstrap 4 has the class position-absolute for that (though it would take more work to center the navbar horizontally).
if you wana put your slider behind your navbar try the below css code for your slider and navbar
.slider{
position:absolute;
top:0;
z-index:0;
}
.navbar-nav{
z-index:1;
}
I am sorry if this is a repeat but I have searched and tried info I have found. Currently when on a mobile, my menu button doesn't drop down or enable me to select any other parts of the menu.
<!-- Navigation -->
<nav id="mainNav" class="navbar fixed-top navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
Menu <i class="fa fa-bars"></i>
</button>
<div class="container">
<a class="navbar-brand" href="#page-top">Chunky Geek</a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" title="about" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" title="services" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" title="portfolio" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" title="follow" href="#follow">Follow</a>
</li>
<li class="nav-item">
<a class="nav-link" title="contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I don't have enough rep to comment, so i'll send this as an answer.
Are you sure you have included both the css and js of bootstrap? For example, does this collapsible work?
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Looks like it is working for me in THIS FIDDLE
Make sure you are using the proper Bootstrap CDN for both CSS and JS. If they aren't all loaded and linked properly, it will not work. v3.3.7 and v4 are blelow:
Bootstrap v4
Bootstrap v3.3.7