Happy Holidays! I have some issue with my navbar. The menu does collapse, but it doesnt expand. I have used this example from Bootstrap. Made some tweaks but it doesn't exapand. It collapse properly, but i don't know why it doesn't expand.
Please find below my code. Thank you!
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="/">
<img src= {% static 'img/lastlogo.png' %} width="463" height="72" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-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="#">Persoane Fizice</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Consultanta</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Cyber Intelligence</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
check your <header> and put this
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js
your code is work for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="/">
<img src= {% static 'img/lastlogo.png' %} width="463" height="72" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-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="#">Persoane Fizice</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Consultanta</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Cyber Intelligence</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
learn more how to use navbar
ok, so i had to refresh the server. it is working now. Some of the items from the list were disabled. i removed that and now is working.
Related
This is what my code looks like for the nav bar, when I press the dropdown button, this is how it will look like on my page
https://docs.google.com/document/d/1gHsqAZ9QTaJX4A-1PXrVVoXi2KWBWqa6YTA_-QtG8wo/edit?usp=sharing
<nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px">RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
I have tried changing the width of the navbar and some of the bootstrap properties but none of my attempts have worked so far. I am unsure if the problem lies with the navbar or dropdown menu.
Thank you so much for all your inputs!
You can add .dropdown-menu-right to .dropdown-menu to align the dropdown to the right when it is shown -- this way it stops it from increasing the width of the page. Is this what you wanted?
Otherwise consider using Bootstrap collapse, I can change my example if you want!
body { height: 100vh }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="bg-dark h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px"> RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu dropdown-menu-right">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu dropdown-menu-right">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
I'm a junior web developer and I'm struggling with my dropdown button. When I resize the screen to test it, it won't drop down. Thank you!
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50?text=Logo" 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.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="form.html">Sign In/Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Did you declare this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
I want develop a navbar which content has space from left and right and it should support mobile, desktop screen side too, but I am unable to get it.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">eNno</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portifolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
This is the output of my code
How can I get it
You can insert a Bootstrap .container inside your <nav>. This will set the proper margins to the left and right. In addition, change navbar-nav mr-auto to navbar-nav ml-auto to align your navbar items to the right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portifolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
This result looks like this:
The mobile navbar:
I can't seem to get the navbar logo to centre align with the nav-links centre below it. I'm sure I'm missing something simple, I've checked out a few other posts regarding this issue but all seem to be using older versions of bootstrap. I am currently using bootstrap 4.0.
Specifically, I want the logo on its own separate row, not on the same one as the links.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/h-tech-logo-cropped.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact Us</a>
</li>
</ul>
</div>
It's a matter of using the flexbox and auto-margin utils as explained in the many other "Bootstrap 4 Navbar Center" questions...
The navbar is display:flex so use flex-column to make content stack
Use mx-auto for auto x-axis margins to center.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand navbar-light bg-light flex-column">
<a class="navbar-brand mx-auto" href="#"><img src="img/h-tech-logo-cropped.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
Responsive demo on Codeply
Related "Bootstrap 4 Navbar Center" questions:
Bootstrap NavBar with left, center or right aligned items
Bootstrap 4 navbar with 2 rows
Center an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?
I have navigation bar that collapses on windows resize. Besides the usual stuff in nav bar like about, contact...etc, i have two social media links (facebook and twitter). After i resize window, both of the social media items jump to the right of collapsed bar and also show up in the "dropdown" of the collapsed bar.
I would like for the social media items to show on the left of the so called dropdown button and for them to not show up in the collapsed bar.
I've tried this by sourcing them outside of collapsed bar div, but nothing changes.
Any help?
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<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="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
</div>
</nav>
For visual:
https://jsfiddle.net/8ay2g0tL/3/
Thank you!
RESULT
im not sure if this is the best practice or not, but the way i finally was able to hide it from collapsed navbar is by setting it to display: none
like this:
#media only screen and (max-width: 998px) {
#navbarfbtw{
display:none;
}
}
Just wrap the class="navbar-social" inside the parent class="collapse navbar-collapse", Also there is no reason to use <div class="navbar-social"> so just add social li items (with navbar-social class) in the parent ul element like this:
Updated JsFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<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="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item navbar-social">
</li>
<li class="nav-item navbar-social">
</li>
</ul>
</div>
</div>
</nav>
It's to do with the order in which the elements are rendered on the page.
The collapsed menu is being "un-hidden" and shunting your icons out of place.
Simply put the "navbar-social" div BEFORE the "navbarForCollapse" div.
https://jsfiddle.net/16x8jhu4/9/
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<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="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>