I have a problem by adding the Sticky-top function to a navbar in a Django proyect. The navbar is responsive and can be desplegated by clicking a button, but I want it to be always present in the top when te user scroll down.
I'm using the next code:
<div id="navBar"><!--Barra de navegación-->
<nav class="navbar navbar-expand-lg navbar-light sticky-top" id="mainNavbar" >
<div class="container">
<a class="navbar-brand"></a>
<a class="navbar-brand" ></a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" id="collapse-button"data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent"
aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ml-auto">
<li class="nav-link" >
Inicio
</li>
<li class="nav-link">
Contacto
</li>
</ul>
</div>
</div>
</nav>
</div>
The docs do not explicitly declare this but if you look at all the samples they only ever nest the nav.navbar inside a div.container. I was only able to get your code to work properly after removing the #navBar wrapper.
Not recommended:
It will also work if you apply the class sticky-top directly to the #navBar wrapper instead of the nav.navbar but that seems to go against the intended usage and therefore it may not work in every browser.
Related
I am copy and pasting the bootstrap documentation navbar https://getbootstrap.com/docs/5.0/components/navbar/ directly into a react component:
export default function Navbar() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto">
<li class="nav-item active">
<a
class="nav-link"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Link
</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Disabled
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
The Navbar displays correctly when previewed and expands when clicked correctly, but when I click the toggle again it does not collapse. When inspecting the element and clicking I see this change:
<div class="collapse **collapsing**" id="navbarSupportedContent">
but nothing changes on my page. I have bootstrap 5.2 installed locally and am able to use other bootstrap features on my page. Other collapses work fine as well. What am I missing?
Bootstrap depends on its JS for some functionality. Have you imported the JS bundle (preferably in your global app file)? If not, please do. If you have, then consider using ReactStrap which is optimized for react.
https://reactstrap.github.io/
Make sure that you already have imported all the dependencies. Some components require JavaScript plugins and Popper to work properly.
Read more about this: https://getbootstrap.com/docs/5.0/getting-started/introduction/
Also https://getbootstrap.com/docs/5.0/getting-started/introduction/#components for more specific components that require those plugins.
In Bootstrap 4 within the toggler hamburger menu is active clicking it will show HomeAbout on the one line, not sure why these aren't on separate lines.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Example
<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 flex-row ml-md-auto d-md-flex">
<li class="nav-item">
Home
</li>
<li class="nav-item dropdown">
About
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</li>
</ul>
</div>
</nav>
Fiddle: https://jsfiddle.net/StoogeMate/qts6gamk/
There's no obvious answer I've been able to find through using Bootstrap itself particularly for the first problem without overriding the .css itself and applying !important tags
Does Bootstrap have this capability?
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Remove dropdown from the About menu item
Wrap the About menu item in a div.btn-group
Use dropdown-menu-right on div.dropdown-menu
<li class="nav-item">
<div class="btn-group">
About
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</div>
</li>
🎁
Remove flex-row to show the menu items on two lines.
<ul class="navbar-nav ml-md-auto d-md-flex">
----
</ul>
The bootstrap nav items in code are not aligning properly in Blazor client side project. I am using the techniques described in Blazor template with menu across the top but am still having this problem. Here is NavMenu.razor:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark
border-bottom box-shadow mb-3 fixed-top">
<div class="container">
<a class="navbar-brand text-light" asp-area="" asp-page="/Index">Top Menu</a>
<button class="navbar-toggler" #onclick="ToggleNavMenu" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="#NavMenuCssClass navbar-collapse d-sm-inline-flex flex-sm-row-reverse" #onclick="CollapseNavMenu">
<ul class="navbar-nav flex-grow-0">
<li class="nav-item">
<a class="nav-link text-light" href="" Match="NavLinkMatch.All">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="counter">Counter</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="fetchdata">Fetch data</a>
</li>
</ul>
</div>
</div>
</nav>
MainLayout.razor:
#inherits LayoutComponentBase
<header>
<NavMenu />
</header>
<body>
<div class="container">
#Body
</div>
</body>
I have tried to modify the site.css file for nav-item, and have tried deleting all definitions for them as well but still getting this behavior:
After much research, I was able to fix this problem by commenting out the .css link tag found in _Host.cshtml. The .css file to comment out is <link href="[Nameofproject].styles.css" rel="stylesheet" />
I was trying something today. In a Bootstrap NavBar, if the logo (navbar-brand) is text only then the hamburger stays on the right. But if the logo is an image, the hamburger shifts to the left when you resize the browser. I can't figure this out.
I'm currently working on Angela Yu's Udemy course and completed the Bootstrap module. Now trying to use what I learned to re-create my own website.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />
</a>
<!-- <a class="navbar-brand" href="#">Navbar</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">Home</li>
</ul>
</div>
</nav>
</div>
</section>
enter image description here
Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap
From w3schools
The flex-wrap property specifies whether the flexible items should
wrap or not.
Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:
Use width: 30% on .navbar-brand instead and set width: 100% to logo image.
I updated your code, please check:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">
<a class="navbar-brand" href="#" style="width: 30%;">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />
</a>
<!-- <a class="navbar-brand" href="#">Navbar</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">Home</li>
</ul>
</div>
</nav>
</div>
</section>
The toggler is simply getting wrapped to the next line, based on the width of .navbar-brand and this is expected behavior for it to then be left-aligned. If you want the toggler to always be right-aligned, adding the class ml-auto appears to work.
<button class="navbar-toggler ml-auto" ...
See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins
I want to add my logo in the navbar in bootstrap 4 beta framework.
The height of the navbar should be the same or nearly the same like the normal height without a logo, like you can see in the first example.
Example without and with logo
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #CECFFF;">
<a class="navbar-brand" href="/"><img src="logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
....
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/gGpJLq
The solutions from another question here are only for bootstrap 4 alpha working.
You could specify the height of the image to ensure it doesn't increase the size of the navbar by adding a class to the img. Like this:
.logo {
max-height: 40px;
padding: 0;
}
<a class="navbar-brand" href="/">
<img src="https://www.lern-online.net/bilder/logo.png" style="height: 35px; padding: 0 auto;">
</a>
here as you can clearly see i gave an inline styling which you can manually modify further on what you need.
The problem here was that the image which you used was appearing in its defaulting size hence the navigation bar was modifying itself to accomodate it we can avoid this by ensuring the size of our image before-hand.
hope I helped.