When I click the nav item , navbar closes and background body also scroll up to the same size until navbar closes and stop scrolling when navbar closed. This only happen on mobile devices. I tried overflow: hidden but it is not working.
Any idea how to fix this ?
Here is my code
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Azam Badar</a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techstack">Techstack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#socialwall">Socialwall</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#let'stalk">Let's Talk</a>
</li>
</ul>
</div>
</nav>
Please see below 2 images, when I click the nav icon and navbar opens , body (myprojects in this case) scoroll down and vice versa.
Many thanks
CSS code would be great to see but i guess you missed position:absolute somewhere. Your navigation has to be positioned as absolute and given z-index greater than the container or you wont be able to see it. Hope this helped , if not , share the CSS code so I can check it out :)
Related
I have copied the navbar code from the Bootstrap 4.6 navbar documentation, and I just added an icon at the beginning of the navbar.
The problem is that whenever I decrease the size of the window and the collapse starts applying the anchor "smile" gets pushed into the middle, I want it to stay in its place after the collapse applies.
What caused this problem and how can I fix it?
My code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<i class="far fa-laugh-beam text-white mt-1"></i>
<a class="navbar-brand ml-2" href="#">Smile</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 ml-auto">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Without css code i can just guess. But i think it looks like justify-content:space-between;
Try to gave one of your classes in <nav> just justify-content:flex-start; or check it inline with <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="justify-content:flex-start;">
Please look at the image below, i have a navbar toggle button on the upper right conner of page,
when i expand it, the actual width of the dropdown items occupies the entire page width, this causes a problem that if you move your mouse to any point within the red box(even not on the change bg text), you can still trigger the dropdown link action.
How can i limit the dropdown item effective area only on the text itself? (and i don't want the text come to the left side of page)
Thanks for your help.
Here is the code i am using:
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#"><img src="../../assets/images/yet.png" alt="" srcset=""></a>
<ul *ngIf="!name" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="login">login</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" routerLink="signup">Signup</a>
</li> -->
</ul>
<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 *ngIf="name" class="nav-item dropdown">
<a class="nav-link" href="#">{{name}}</a>
</li>
<li class="nav-item">
<a class="nav-link drop" href="#" (click)="switchBackground()">change bg</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="logoff()">Log Off</a>
</li>
</ul>
</div>
</nav>
Apply the below css to your component
.nav-link{
display: inline-block;
}
The links are block by default. So they would take the complete width. Change them to inline-block.
For moving the menu items to the left, apply the below css
.navbar-nav{
text-align: left;
}
The text should be aligned left by default. Maybe you have some other CSS in body which is overriding the default behaviour.
so I would like to move nav items closer to the center of my navbar with Bootstrap but am having trouble. I don't want them all the way to the outside but also not all the way to the center. For instance I would like the left elements to be center left and the right to be center right. I have included a picture and my code. Is there anyway to do this Bootstrap? Already tried offset and it messes up the nav elements.
Picture
<nav class="navbar navbar-expand-lg sticky-top" id="navbar">
<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">
<a class="navbar-brand active" href="/"><img src="../static/img/123.png"></a>
<li class="nav-item">
<a class="nav-link" href="#">Why Our Site<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#test">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="support">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog">Blog</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
<li class="nav-item">
<span>Sign up</span>
</ul>
</div>
</nav>
Thanks for any help.
You could use container class. For example:
<nav class="container navbar navbar-expand-lg sticky-top" id="navbar">
or check the grid system here.
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've created a nav bar that collapses, based on the browser size. I cannot seem to stop the nav bar from stacking, and the icon goes beneath the nav bar brand when the browser size is reduced. I would like to get it to show on the right side of the nav bar, rather than underneath the brand.
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top navbar-custom" id="mainNav">
<a class="navbar-brand" href="#home">
<img class="logo" src="img/unicornActive.png" onmouseover="hover(this);" onmouseout="unhover(this);" alt="logo">
</a>
<button class="navbar-toggler navbar-toggler-left" 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" role="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-toggle="tab">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#technique" data-toggle="tab">Technique</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
</nav>
Any help would be really appreciated! I've tried floating it right and it doesn't seem to work.
Which version of bootstrap and jquery do you use?
I created an instance on jsfiddle with the newest version of the bootstrap framework and I do not get your issue.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js
JSFiddler