Use Bootstrap navbar as a fixed top bar that doesn't collapse - html

I'm trying to do a simple thing: a top bar (like a fixed navbar) that has a brand name on the left and 2 icons on the right. I'm developping for mobile, so I don't want it to change (collapse, like a navbar does by default) for small screens.
I'm relatively new to Bootstrap, so I guess I'm doing something wrong.
In order to prevent the collapse, I put everything in the navbar-header div. I created a <span class="pull-right"> to get the icons to the right, but I can't get them to render correctly.
(I doubt if this matters, but I'm using Bootstrap 3.0.x.)
This is what I currently have: http://jsfiddle.net/rd73tecL/2/

Try using the following CSS to disable the collapsing effect (as referenced here: Bootstrap 3 - disable navbar collapse):
.navbar-collapse.collapse {
display: block !important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
I'm unsure as to what you mean by 2 icons on the right: to the immediate right of the logo or right of the navbar? If the latter case, you could put your nav bar links into a div and add the pull-right class to put it to the right of the navbar. You would then also need to add display: inline-block !important; to the css of your navbar logo, as shown in this JSfiddle
Hope that helps.

Try using this code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fibe</a>
<span class="navbar-right pull-right">
<ul class="navbar-nav nav">
<li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
<li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
</ul>
</span>
</div>
</div>
</nav>
Just amended
<span class="navbar-right"> with <span class="navbar-right pull-right">
Hope this helps.

Related

navbar not working in mobile web app

I have a simple nabber with page-scroll. It works in the desktop but when I view it in the mobile web app, it doesn't even display the menu or the toggle navigation. I am sure I am missing something with respect to mobile view but not sure. I checked couple of posts from stack overflow but didn't help. Please refer the navbar code snippet below
<nav class="navbar navbar-default navbar-fixed-top"
style="background-color: #757470; padding-left: 0px; margin: 0px; height: 64px;">
<div class="container" id="menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1"
style="font-family: Lato; font-size: 12px;" class="gatewayNav">
<ul class="nav navbar-nav"
style="padding-top: 0px; padding-left: 0px;">
<li><div style="" class="gatewayLogo"></div>
<h1 style="padding-left: 200px;"></h1></li>
<li class="dropdown"><a data-toggle="tab" href="#home"
id="homeMenu" prevent-default="" scroll-to="home"
style="border: medium none; padding-top: 10px; padding-bottom: 0px;"><b
style="color: white; font-size: 13px;">HOME</b><br> </a></li>
<li class="dropdown"><a data-toggle="tab" href="#startups"
prevent-default="" scroll-to="startups"
style="border: medium none; padding-top: 10px; padding-bottom: 0px; color: white;"
id="startupMenu"><b style="color: white; font-size: 13px;">STARTUPS</b>
<br> </a></li>
</ul>
</div>
</div>
First make sure that you are loading jquery first and then bootstrap's javascript after that. If you have these loaded correctly then your problem may be a couple of different issues. One being that if you are not seeing the toggle button you may have some custom css for your toggle button making it have no border or something to that effect. And without the <span class="icon-bar"></span> elements in the button you may not be seeing the toggle button. Next thing I see is you have a height set for the navbar. If you are seeing the toggle button and after clicking on it you don't see the dropdown because you have a white page. You may want to consider adding padding to get your desired height instead of giving it a height.
Here is a fiddle with your navbar working. I added a top and bottom padding of 7px because bootstrap 3's navbars are 50px so to get to 64px you can just add 7 to the top and bottom. Then I added the icon bars to the toggle button so you can see it. Like I said though make sure you loaded jquery first then bootstraps js file after as well. Here is the fiddle demo JsFiddle Navbar Fix
PS if you are not going to have a dropdown menu for each of your <li> elements in your navbar then there is no reason to add the dropdown class to the <li>. Also are you going to be toggling a tab or scrolling to a section when you click on your links and all of the page breaks and strange paddings may be causing some issues. Please leave a comment after this answer so I can understand what you are trying to achieve with all of this because it looks like you have a lot of conflicting issues with this entire markup and I am just trying to understand what you are trying to do so maybe I can help.

Why do I have to remove "position:relative" in dev tools and add it back before the "top" property works properly?

I have two DIVs in a nav bar stacked on top of each other inside container elements so they can slide up and down and have only one row visible at a time. Below is the markup and styles, stripped down to the relevant bits. I'm using Twitter Bootstrap 3 as well.
#searchrap {
height: 38px;
overflow: hidden;
position: relative;
}
#searchrap .slider {
position: absolute;
height: 76px;
}
<nav class="navbar navbar-default navbar-fixed-top" id="miscnav">
<div class="container-fluid">
<div class="navlinks">
<ul class="nav navbar-nav">...</ul>
<div id="searchrap">
<div class="slider">
<div class="links">
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<div class="search">
<form class="form-search" id="siteSearch" action="search" method="get">...</form>
</div>
</div>
</div>
</div>
</div>
</nav>
For some reason, when the page loads, the .slider DIV is positioned ~35px too high. I've tried setting "top:0" but it makes no difference. In Chrome dev tools I can uncheck "position:relative" on the #searchrap DIV in the inspector and that causes the .slider DIV to fall into the right position. Then I can check it again and everything is fine--it doesn't go back up. I can fix the alignment issue by setting "top:35px" but then if I uncheck and recheck "position:relative" it makes it 35px too low and I need to reset "top" to 0. I don't like this solution anyway because I don't understand why 0 isn't the top of the viewport.
You can see it in action here: https://www.tntech.edu/dev/ttu15.interior
The search field, which is on the bottom, starts out visible with the nav links above the viewport. It should start out with the nav links visible and the search field below them. What gives?
Thanks in advance!

how to format and position text properly in bootstrap 2 nav bar

I need some help with Bootstrap 2
How do I get "text" to position and formatted nicely in the navbar ?
http://jsfiddle.net/sGgKE/198/
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">w3resource</a>
...
<ul class="nav navbar-nav pull-right">
<li>Name</li> <---- this text looks a bit weird and not positioned properly
</ul>
</div>
</div>
</div>
By the way, it should be just text, not a link. If I do like this it will work but I dont want it to be a link.
<li class="">Name</li>
It does not actually behaves strange. The PHP and DB elements are aligned centered because they have corresponding styles in the selectrors.
.navbar .nav>li>a{
float:none;
padding: 10px 15px 10px;
color:#777777;
text-decoration:none;
text-shadow:0 1px 0 #ffffff;
}
and in the .navbar .nav selector.
Your ul element does not have those styles affected, that is why it is aligned absolutely the way it should (not vertically centered). If you want your Name element to be aligned vertically centered, you can try to apply margin to the ul.
Here is the worrking fiddle with a possible workaround.

Bootstrap Navbar content stacking

Bootstrap newbie here. I've only today started using Bootstrap to develop a website with, but something's going on that I can't figure out. I am using the following code to create my navigation:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav uppercase bold">
<li>Projecten</li>
<li>Over</li>
<li>Contact</li>
</ul>
<a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a>
</div>
</div>
The idea is that there's a set of links aligned to the left, and a logo is displayed aligned to the right. Now I have noticed that this works fine as long as the browser window size is larger than 768px (where the bootstrap css still assigns a width to .container) but when the window becomes smaller (and the .container class no longer has a width, I believe), the links on aligned to the left of the navbar start stacking vertically, instead of horizontally.
The uppercase and bold classes in the ul are included in my custom css, to style the links.
If I were to guess, it has something to do with the "block" alignment or perhaps the .container becoming too small to fit the links horizontally, but I am unable to figure this out, and could not find a similar problem on the web.
I figure this is probably something very simple and makes me look stupid, but I hope you can help. Thank you.
You can add CSS like this to prevent it from stacking..
.navbar-nav {
min-width:360px;
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
http://www.bootply.com/114462

Bootstrap mobile navbar cuts off

I'm building a site with Bootstrap. For some reason, the mobile navbar cuts off "Menu" as you can see here:
I'm just using normal Bootstrap responsive code for the navbar:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Menu</a>
<div class="nav-collapse collapse">
Trouble is, if I add any sort of padding, it adds too much padding to the non-mobile navbar and makes it look weird. Has this happened to anyone else?
In your theme.css file you have:
.navbar-inner {
border-radius: 0;
margin: -20px 0; <-- *
}
* This is putting your inner navbar off the top of the page. Either remove it or change it to -10px;