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
Related
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.
This question already has answers here:
Bootstrap change navbar color
(8 answers)
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 3 years ago.
I've tried to use one of the recommended bootstrap 4 navbar styles. I pasted the code inside my project and all worked well. The only problem is that I've changed the background color from dark to white. Because of that text inside the navbar went invisible. I was trying many ways on how to change the text color to black so you can see the text but it didn't work and I can't figure out how do I change the color of the text from white to black.
I've tried adding the text-black class inside one of the navbar classes which didn't work as well.
Thanks for any help.
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</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 ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
The navbar-dark class on your <nav> element is the one setting the text color.
Change the navbar-dark to navbar-light when using light background colors.
Documentation: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</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 ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
Just add some css to #navigation * and set the color using color.
#navigation * {
color: red;
}
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</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 ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
Hope this helps
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.
I am using MDBootstrap(essentially Bootstrap 4) Navbar Collapse, however the toggle button won't collapse when clicking on an element. I've reached out to MDBootstrap themselves and can't seem to get an answer. I've been told to use Angular, but I'm using JQuery and I have read that you shouldn't mix those two together. Also, I don't know how I would incorporate Angular into my website. I've used Bootstrap before and never had to use Angular just to get the toggle button to close once clicked on. Does this sound familiar to anyone?
Lastly, when I click the toggle button, it opens upward rather than down- can anyone help with that as well, I would like it to open up downward.
My code is here:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="height: 70px;">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="index.php"><img src="img/andrea1.jpg" class="rounded-circle img-fluid">
</a>
<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#port">Portfolio</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="https://www.linkedin.com/in/andreasanchez2/" class="nav-link" target="_blank" title="Follow on LinkedIn">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/dec23rd1986" class="nav-link" target="_blank" title="Follow on Github">
<i class="fa fa-github"></i>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/dec23rd1986" class="nav-link" target="_blank" title="Follow on Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" title="Contact">
<i class="fa fa-envelope mr-3"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
Don't set height on the Navbar. Remove the style="height:70px;".
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark scrolling-navbar">
<div class="container">
...
</div>
</nav>
Working as expected
I am working on a navbar template from Bootstrap 4 website but I'm having a problem regarding the posistion of the collapse nav items. Originally, toggle button is placed on the left side of the navbar as well as the list items.
But I want them to on the right side of the page, so I inserted a float-xs-right class on the button and nav items. Then if I click the toggle button, the collapse items are not positioned properly. As you can see on the screenshot.
Navbar screenshot
I want the collapse items to be positioned below and on the left side.
Btw, here's my code:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
Also, here's my codepen for this navbar:
http://codepen.io/marcvs/pen/PGvqBO
Thank you in advance.
For Bootstrap 4 Alpha 6 / Beta: Bootstrap 4 align navbar item to the right
This is the proper way to do it. You want to float the menu left by default. Float the button right (float-xs-right) on everything but it can't be seen (hidden-lg-up) and then float-lg-right the ul for it to work like you want.
See this codepen:
http://codepen.io/anon/pen/mAYAKd?editors=1100
It works fine.
Note this added CSS:
#media screen and (max-width: 992px){
#main-navbar {
clear: both;
}
}
HTML:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav float-lg-right">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
Hello See the below example.Though I did It in another way but Hope you are looking for this.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#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>
</div>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Bio</li>
<li>Details</li>
<li>Award</li>
<li>More info</li>
</ul>
</div>
</nav>
See The Fiddle NavBar Fiddle Demo
Hope It Helps.