In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.
I've tried setting pull right on it, and setting pull-left on the brand image, but no luck.
I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. Please help.
Here is what it looks like on mobile:
Here is what I want it to look like on mobile:
On desktop it works fine.
Here is my navbar html:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="/apply/">Continue Application</a>
</ul>
</div>
</div>
</nav>
</header>
Please help.
Following Bootstrap 3 styling, your navbar element should show the mobile toggle button when in responsive resolution, like in this example.
If you want to have only those two elements of your interface in the same position inside a navbar element you could edit your html as follows:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
<a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
</div>
</div>
</nav>
</header>
But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience.
Related
I am simply trying to place an image directly UNDER the navbar. I DO NOT want the nav bar text to overlap the image in any way.
No matter what I do in my code the image stays locked to the end of the navbar. It will not go into its own separate row BELOW the nav bar.
I have tried putting it in its own div, section, p, ul, li, and nothing works.
Is there a way to adjust the image in another contianer, without using the break tags.
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md fixed-top">
TEXT
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<br>
<br>
<br>
<br>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img class="img-thumbnail rounded-circle" src="/Users/admin/Pictures/img.jpg" alt="img">
</div>
fixed-top makes nav to be position: fixed, So the vertical height can't be filled. If any further tags are added, those tags will stack to the nav.
To overcome this situation use padding-top of approximate calculation of nav height say 50px. So applying this value to the further tag in your case <body style='padding-top:50px'>
Or else we can use sticky-top, but it is not compatible for all browser yet
I think you must use position sticky instead of position fixed for your navbar
On my website, I am using the navbar-fixed-top class as per bootstrap's docs. I want my nav to stay fixed but unfortunately the position becomes relative upon viewing the page source. Here is my code.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="navId">
<li class="nav-item">
Home
</li>
<li>
Work
</li>
</ul>
</div>
</nav>
I am quite confused on this. I believe I have followed this example properly. If someone knows my error here, let me know!
One more thing. I have NOT overriden any styles of bootstrap.
<nav class="navbar navbar-default navbar fixed-top">
Just remove "-" between navbar and fixed top
How can I make a responsive navigation bar where it does not cover the top of my page? I am using thymeleaf framework, and twitter bootstrap.
My Navigation code
<div th:fragment="header">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;">
<div class="container">
<div class="navbar-header">
<div id="logo"><img th:src="#{/images/bg.jpg}" /></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a th:href="#{/}">Home</a></li>
</ul>
</div>
</div>
</div>
</div>
I don't have much css for this part because I am using twitter bootstrap.
Css
#logo
{
display:inline-block;
}
Here is an image that is blocking my page.
Take out the class navbar-fixed-top and see if that solves your issue.
I have been developing a webpage with bootstrap along with some additional styles. The problem is that the navbar is not collapsing in the mobile view. I think that my multiple css files are overlaping.
Can anyone suggest me the appropriate changes?
Thanks in advance.
My html and css codes are here
Try the below solutions
1.Did you include bootstrap.min.js file in your page.
Add below in your file footer and try.
<script src="js/bootstrap.min.js"></script>
OR
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2.just try change order of loading css files, load your custom css first and bootstrap last.
3.Inspect Page and check for errors(If any path misses make them correct.)
*Include "JQuery" if you miss this. Because Bootstrap JS Needs JQuery for proper working. Must load above bootstrap js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
Here is the working code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="index.html" style="line-height:50px" data-0="margin-top:20px;" data-300="margin-top:5px;">GrocShop
</a></h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
<li class="active">Home </li>
<li>Team
</li>
<li>Careers
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the JSFiddle demo of your code
(hide the Result span of JSFiddle.net to be able to click on the nav button)
What was fixed:
A style should be defined. navbar-default was added to the div class="navbar ..." that defines the navbar.
The CSS for .navbar-toggle where disabled since they made the button to look like a dot.
I am new to Bootstrap and I have been working on getting to know the navbar. I notice that when the browser is full (widescreen) width, the brand title and nav anchors keep toward the left center of the page, instead of aligning to the very left of the page, as it does when the window is smaller. How can I make the text in the navbar hug the left of the page? Regardless of how wide the browser window gets I'd like to be able to make it stick to the left of the window. Is there a particular reason not to do this?
Here is a live demo on jsFiddle. Notice that if you pull the handle and widen the viewport as much as possible to the left, the text will eventually move toward the center of the navbar.
My navbar markup is the same from the starter demo provided with bootstrap, I know the responsive features and icons aren't hooked up in the fiddle, however they are working on my local project and are not relevant to the question. I imagine I need to text-align left my custom CSS, however my attempts to apply this have failed. Any help would be much appreciated.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
The brand is "centered" because it is inside a container div and this container div is always centered with varying width based on the width of your view-port or browser window.
I would advice that you keep it that way because it gives it a more symmetrical look. If you still want to change it, all you need to do is remove the brand link from the container div. Like so:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Project name</a>
<div class="container">
<div class="nav-collapse collapse">
...
Maybe there is simpler way to do this (with recent versions of bootstrap at least).
Just replace the <div class="container"> by <div class="container-fluid">.
This will make sure that the container for the content of your header spans the full page width.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
...