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
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;">
I am new to Angular/Bootstrap and currently trying to put an image on top of the navigation bar in the top left corner. Using padding/margin could fix the problem with a normal resolution/static screen size, changing the size put the image elsewhere.
I have tried to use padding and margin, but as I said, it was not possible, to make it "sticky" in the top left corner, when changing the browser sice.
Also using the bootstrap classes, for example "pull-right" (just for test-cases) did not work.
My current code looks like:
<header>
<div class="cloud">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark $green static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" class="pull-right" alt="" width="431.27" height="55.35">
</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="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="first">
<h1>TestSite</h1>
</div>
</header>
I expected an image in the top left corner that is responsively staying there while changing browsersizes/devices
Please check this code to see, whether this is the desired result. Fully working demo is available here
Main Changes made on your code is.
added CSS class bg-dark and removed $green static-top on nav. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
fixed the width of brand image to 50%, using css. This can be changed to some other value.
removed width and height attributes from img tag.
.navbar-brand img{
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
</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="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
aight hello there, so im using bootstrap 4 and trying to create a navbar menu
here is my code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</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>
</ul>
</div>
<ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>
So what im trying here is I want a navbar menu and some items but I want some items not be collapsed and at the same time to be in the right.
I tried moving the item I want to be in the right moved to after toggler button and it's working exactly as I want, but in small devices and in desktop device it shows back to the left.
I tried moving the item I want to be in the right after the div collapse element but it collapses in small devices.
The problem was solved by separating the navbars into two separate divs, using bootstrap4 row and col, and giving a padding of 0 to the two separate divs. I used an in-line style to position the Login item but this is just for illustration purposes. It would be better to convert the in-line style into a class.
<div class="container-fluid">
<div class="row">
<div class="col-8 p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</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>
</ul>
</div>
</nav>
</div>
<div class="col-4 p-0 ">
<nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
<ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
</ul>
</nav>
</div>
</div>
</div>
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.
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 :)