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
Related
I'm trying to create navbar at the top that sticks as one scrolls but is having difficulty trying to use bootstrap. My logo and the other text are not aligned.
HTML using bootstrap:
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end style="background-color: #e7a412;">
<div class="container-fluid">
<!-- Mos logo -->
<div><a class="navbar-brand ms-lg-3" href="#">
<img src="images/mos_logo.png" alt=""></div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation">
<!--<span class="navbar-toggler-icon"></span>-->
<i class="fas fa-bars"></i>
</button>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mos Outlets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Mos</a>
</li>
</ul>
<span class="navbar-text">
</span>
</div>
</div>
</nav>
But my text is not aligned to logo:
enter image description here
the code <a class="navbar-brand ms-lg-3" href="#"></a> under <li> tag take its space so logo and other text are not align. I guess you duplicated it incorrectly?
Also, I found that there are some missing syntax and closing tags with your code. Please take the below code for your reference.
Missing a " for <nav>'s class.
Missing closing </a> for the logo div.
A extra closing tag</button>.
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end" style="background-color: #e7a412">
<div class="container-fluid">
<!-- Mos logo -->
<div>
<a class="navbar-brand ms-lg-3" href="#"> <img src="images/mos_logo.png" alt="" /></a>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<!--<span class="navbar-toggler-icon"></span>-->
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mos Outlets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Mos</a>
</li>
</ul>
<span class="navbar-text"> </span>
</div>
</div>
</nav>
Im trying to use font awesome icon on my page beside the navbar brand. But for some reason its not loading. Need Help
<script src="https://use.fontawesome.com/e017101791.js"></script>
This is the script tag that font awesome mailed me and the one i'm using in my code
In the font awesome website the html for book-reader icon is
<i class="fas fa-book-reader"></i>
But in my code if i use 'fas' with 's' its not working so i had to write the class name as 'fa fa-book-reader'
In the footer I'm using facebook, twitter, instagram icon they are all loading perfectly after writing their class names as 'fa fa-facebook' instead of 'fab fa-facebook'.
.HTML
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<i class="fa fa-book-reader fa-3x mx-3"></i>
Books</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="mr-auto"></div>
<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="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Price</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
Pages
<div class="dropdown-content">
Generic
Element
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
My Webpage Pic
Expected Webpage Output
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
Use this cdn type and you will be good to go.
Include this in the head section of your page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
I'm getting familiar with MDbootstrap and bootstrap 4. I recently created a website using the toggle with no problem however, with this website I'm creating, the toggle won't close once clicked on. I can't seem to figure it out. I have a feeling this is a MDbootstrap error as the I have seen others comment about this but no answer. As I'm learning more about MDBootstrap, I'm running into a lot of errors. Can anyone help me?
HTML
<!--Navbar /Logo-->
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7e57c2;">
<a class="navbar-brand" href="index.html" style="color:#FFF;">Ride with Amy</a>
<!--Toggle Button-->
<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" style="color:#FFF;"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"
href="#about_link" style="color:#FFF;">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#schedule_link" style="color:#FFF;">Schedule</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/ridewithamy/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:#FFF;"></i></a></li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/amy.kaczmarek.3" title="Follow on Linkedin" target="_blank"><i class="fa fa-facebook fa-lg" aria-hidden="true" style="color:#FFF;"></i></a></li>
</ul>
</div>
</nav>
Your html code work fine when i check , no problem at all. You please check your bootstrap dependencies ..
I am using Bootstrap 4 and I am trying to make the menu that pops up by clicking the collapse button to open on the right side instead of the left. I have tried using "ml-auto" on the "ul" element. The navbar items are correctly on the right side when it isn't collapsed. When it is collapsed, the button is correctly on the right side but the menu pops up on the left. I have also tried putting "ml-auto" in the div as well but that didn't work. Here is my HTML:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
<button class="navbar-toggler ml-auto" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i> Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Contact</a>
</li>
</ul>
</div>
</nav>
I feel like there is a simple solution but I can't figure it out.
Just add simple rule to your css.
.nav-item{
text-align: right;
}
According to http://getbootstrap.com/docs/4.0/components/navs/#horizontal-alignment, the way to center, right-justify, or left-justify things in the navbar's collapsed dropdown is to use justify-content-end and friends in the class of a nav.
Example. This code yields the image following it.
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="list-inline social-buttons">
{% for link in site.social %}
<li class="list-inline-item">
<i class="{{ link.icon }}"></i>
</li>
{% endfor %}
</ul>
<div class="navbar-toggler" data-toggle="collapse" data-target="#menu">
☰<!-- three bars symbol -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav ml-auto">
<a class="nav-link page-scroll" href="#about">About</a>
<a class="nav-link page-scroll" href="#projects">Projects</a>
<a class="nav-link page-scroll" href="#writing">Writing</a>
<a class="nav-link page-scroll" href="#contact">Contact</a>
</ul>
</div>
</div>
</nav>
Now amending that one line to:
<div class="nav ml-auto justify-content-end">
yields
Note this evidently has nothing to do with ml-auto, which when missing causes the uncollapsed menu items (on a wider screen) to not be right-justified. (The toggler button itself is always right justified for me.) Only justify seems to control the stuff in the uncollapsed menu.
Just use "text-right" in HTML
For example:
<div class="navbar-collapse text-right" id="navbarResponsive">
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