I'm having an issue with my Bootstrap v4.5.0 navbar. I want to use a logo as the navbar brand. I want it to be treated exactly as if it were HTML text. However, I can't seem to figure out how to replicate it. Note that my navbar has other items besides just the brand, and that for some reason, the img pushes the "Home" and "New Record" links all the way on the right side of the bar when these 2 items should be directly next to the logo. I've adjusted the padding and other CSS items to try to resolve this with no l When I shrink the window, I want the img to stay the same size, but as of now it shrinks. So, to recap, my 2 issues are: 1. incorrect padding of other navbar links next to logo, and 2. resizing of logo based on window size. I want to make the img behave as close to plain HTML text as possible. Thanks for any assistance! I've attached an image of my page to illustrate some problems. Notice the resizing of the logo as well as the incorrect placement of "Home" and "New Record".
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width=8% height=8% />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">New Record</li>
</ul>
<ul class="navbar-nav ml-auto" style="float: right">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>
The incorrect placement of home and new record is because of you put those into different tag from my account. And use margin left auto so it will get cover all the extra space and push your icon to the right.
I was able to get the desired outcome with the following:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width="80" height="25" />
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
<li class="nav-item">New Record</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>
I was able to hard set the logo to a certain pixel size (which I dislike the idea of for reasons of inflexibility). Also, I set ml-auto for the collapsible button and "My Account", and mr-auto for "Home" and "New Record".
Related
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>
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.
I am working on an Angular application and have installed Bootstrap using Bower. On my index.html file I have the bootstrap js and css files, both minified.
When I view my app in a browser the navbar is not displaying as expected. Here is the code for the navigation bar I have on my page.
<nav class="navbar navbar-inverse bg-inverse navbar-expand-md fixed-top">
<a class="navbar-brand" href="home">Akeva</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="companies">Companies</a>
</li>
</ul>
</div>
The CSS adds the background colour and the menu items align horizontally but the rest of the navigation does not look how it should.
Here is how the navigation is appearing:
how the menu is display
Any ideas on why the Bootstrap nav is not appearing as expected?
Below is my code for bootstrap 4
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-upload"></span>
Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-excel-file"></span>
Export to Excel
</a>
</li>
</ul>
<span class="navbar-text color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
there are various examples given for bootstrap 3 here
How do you decrease navbar height in Bootstrap 3?
but none of them seem to work for bootstrap 4, can anyone help with this one?
Decreasing the Navbar height is easier in Bootstrap 4 using the spacing utils. The height of the navbar comes from padding in the Navbar contents.
Just use py-0 in the nav-link and navbar-text..
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-upload"></span> Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-excel-file"></span> Export to Excel
</a>
</li>
</ul>
<span class="navbar-text py-0 color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
The py-0 class sets padding-top:0;padding-bottom:0 on the items.
Bootstrap 4 Navbar Shrink Height
If anyone like changing CSS to get the same result, try this method. In my case I have just changed the .navbar min-height and the links font-size and it decreased the navbar.
For example:
.navbar{
min-height:12px;
}
.navbar a {
font-size: 11.2px;
}
And this also worked for increasing the navbar height.
This also helps to change the navbar size when scrolling down the browser.
I am not very adept at styling websites and have trouble with css and responsive design. As such, at the suggestion of a co-worker, I've decided to give the Bootstrap toolkit a try and so far I've been very happy with it. However, I am having trouble understanding a few things about the navbar components of the kit and so far have been unsuccessful in customizing this portion of the templates.
One of my sources of confusion stems from the pervasive inclusion of a toggleable button for collapsing the navigation bar. It seems like no matter what example they show of the navigation bar, they've included the collapse classes and toggle button, even where that button doesn't appear to be displayed anywhere and the navigation bar is not collapsed. For example, take a look at the following link: http://getbootstrap.com/examples/navbar-fixed-top/
If you view the source here, there you see the button and the collapse classes, but the navbar is missing said button and it is not collapsed. When I view the CSS I do see that it has display: none; specified, but then why include it at all?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Finally, I believe this issue is interrelated to the second issue I'm having, which is, I am trying to right justify the links of my customized navbar with the navbar-right class, but when I do so, the links don't move to the right. Does this have something to do with my removal of the toggle button and collapse classes? Here is my attempt which has failed miserably. I am using the base jumbotron template and have included the jumbotron and min bootstrap css files. The jumbotron css file is very minimal and only includes some body stylings for a margin and a color, I believe. I can't see where that would be preventing my navigation links from showing up on the side.
Instead, the image appears on the left, and the links appear just below it, with no styling whatsoever, just a jammed together list of links. The dropdown does not work because I was experimenting with a different method used on the angular site by specifying the uib-dropdown so I should mention that - the dropdown portion was working when I had the bootstrap classes and attributes specified.
For a jsfiddle example of what is happening when I attempt to get the links to show up on the right: https://jsfiddle.net/1jehsp5r/
In fact, I have yet to find a single working example of the right alignment in the navbar. I have re-done this code about 10 times now and not a single combination of classes and divs have yeilded a simple fixed top navigation bar with an element on the left and a set of links on the right. Take this tutorial for example: https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm - They have a screenshot of it working, but when you click the "try-it" button and it loads into an interactive screen, their OWN example doesn't even work right. Everything aligns on the left, which is exactly what I am experiencing.
Can anyone show me the right way of simply making a simple navigation bar similar to the one here: https://angularjs.org/
For the collapse button, it is set to appear in small screen for most of the cases. It's there for responsiveness (or the art of display well on all screen size).
Here is an example of collapse button : Bootstrap navbar external-content
To align items on the right side of the row, you could use the ml-auto (margin-left: auto;) class on the <ul> element.
Here is an example of a bootstrap navbar with links align on the right side.
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Hope it helps.
EDIT :
Those examples was build for Bootstrap 4 alpha 6.