Bootstrap, navbar with fixed position - html

I have a navbar on the top of my html site. I recently wanted to change it so that the bar will always show on the page as the user scrolls down. I ran into a problem when doing this. For some reason, it takes the list and stacks it vertically when initially it is horizontally. I have been trying to find a solution for this but I am stuck. Here is what it looks like:
I can not figure out how to keep the list horizontal, All help is greatly appreciated!
<table>
<!-- first row -->
<tr>
<!-- first column -->
<td colspan="2" style="position: fixed; top: 0px; right: 50%">
<div class="navbar" style="text-align: center; margin: 0 auto;">
<div class="navbar-inner">
<div class="brand">
<a href="www.investorsfortunes.com">
Investorsfortunes.com
</a>
</div>
<ul class="nav">
<li class="divider-vertical">Investors</li>
<li class="divider-vertical">Deals</li>
<li class="divider-vertical">Attornies</li>
<li class="divider-vertical">Appraisers</li>
<li class="divider-vertical">Contact Us</li>
<li class="login">
<button class="btn btn-primary" id="loginBtn" >Login</button>
</li>
<li class="login">
<button class="btn btn-primary" id="loginBtn" >Sign-Up</button>
</li>
</ul>
</div>
</div>
</td>
<!-- second column -->
<td>
</td>
<!-- third column -->
<td>
</td>
</tr>
</table>

wrap your nav bar in between these div elements
<div id="navbar" class="navbar navbar-fixed-top ">
</div>

Related

Bootstrap Page not Working: Extra Line Breaks and Drop Down Menu Not Working

I have a website that utilizes Bootstrap. It has been online for several days. Just today, however, the drop down menu stopped working, and there was a line break betweent the menu and the body. Is this an issue just for me or for others who use Bootstrap as well. After the navbar, I have a blue strip that fades in.
What's causing the problem, and is it just my problem? How do you solve it? Thanks!
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse net-27" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li>About</li>
<li>News</li>
<li>Contribute</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class=""></span> Login</li>
<li><span class=""></span> Sign Up</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<center>
<div id="test" style="background-color:#001A57; color:#FFFFFF; font-family:Lucida Bright, Arial, sans-serif";>
<p style="text-align:center;">Welcome!</p>
<br /><p id="nothuge" class="plzplz"></p>
<br />
<p style="font-size:20px;">--Site Info--</p>
<br /><p style="font-size:30px;">
Login/Register</p>
</div>
<br />
<br />
<h1>Welcome</h1>
</center>
</div>
<!-- /.row -->
<div class="row">
<center>
<p class="lead">Text</p>
<p class="intro-line2" id="bittearbeit">MoreText</p>
</center>
</div>
<footer class="margin-tb-3">
<div class="row">
<div class="col-lg-12">
<p>© My Site 2017 | contact#my.site</p>
</div>
</div>
</footer>
</div>
<!-- /.container-fluid -->
</body>
(https://jsfiddle.net/user2015748/g776473m/1/)
I have a lot of CSS with that, which you can see in the JSFiddle.
As you can see, there is no code for a line break after the navbar. Thank you again for any help!
You have a CSS statement that adds this line. Its a "margin-bottom: 20px;"
Try this:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 1px solid transparent;
}

float the text in the navbar right

I would like that my navbar is floating right. I tried to set the <ul class="nav navbar-nav float="right", but the navbar is still centered. I am quite sure that the float should be on this tag? I also tried with text-align:right;, which did not work either.
Is there something I am missing here?
HTML
<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">
<!-- header-container start -->
<div class="header-container">
<!-- header start -->
<!-- classes: -->
<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
<!-- "full-width": mandatory class for the full-width menu layout -->
<!-- "centered": mandatory class for the centered logo layout -->
<!-- ================ -->
<header class="header fixed clearfix">
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
<!-- logo -->
<div id="logo" class="logo">
<img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" >
</div>
</div>
<!-- header-left end -->
</div>
<div class="col-md-9">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- classes: -->
<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
<!-- ================ -->
<div class="main-navigation animated with-dropdown-buttons">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav" float="right">
<!-- mega-menu start -->
<li class="mega-menu">
Hjem
</li>
<!-- mega-menu end -->
<!-- mega-menu start -->
<li class="dropdown mega-menu">
Kompetencer
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4 class="title">UX/UI</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>UX/UI</li>
<li ><i class="fa fa-angle-right"></i>Prototyping</li>
<li ><i class="fa fa-angle-right"></i>Web Design</li>
<li ><i class="fa fa-angle-right"></i>Grafisk Design</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Webudvikling</li>
<li ><i class="fa fa-angle-right"></i>PHP & MySQL databaser</li>
<li ><i class="fa fa-angle-right"></i>Wordpress</li>
<li ><i class="fa fa-angle-right"></i>Umbraco</li>
<li ><i class="fa fa-angle-right"></i>Joomla</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Mautic</li>
<li ><i class="fa fa-angle-right"></i>Landesider</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><u>En oversigt over alle mine kompetencer</u></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
Portfolio
</li>
<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li>Uddannelse</li>
<li >Erhvervserfaring</li>
<li >Personlighed</li>
</ul>
</li>
<li class="mega-menu">
Artikler
</li>
<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
Kontakt
</li>
</ul>
<!-- main-menu end -->
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
<!-- header end -->
</div>
<!-- header-container end -->
There are few reasons it is positioned to the left. You need to target the container that the nav is in first. It has a padding to the right. Remove this:
.with-dropdown-buttons .navbar-default .navbar-collapse {
padding-right: 0;
}
Then you can float the navbar to the right, but you'll need to be specific about screen widths.
#media (min-width: 768px) {
.navbar-nav {
float: right;
}
}
This works for me when I make these changes in the developer tools. If it doesn't work you will need to check if it correctly overriding bootstrap CSS, or you can use !important.
EDIT
You might also want to remove the padding on the last menu item, to make it flush with the edge of your container. You can try:
.navbar-default .navbar-nav > li:last-child > a {
padding-right: 0;
}
float is a CSS attribute. You may use it this way:
<ul class="nav navbar-nav" style="float: right;">
...
</ul>
Note that UL is a block tag and covers all the width. So, if you want it to fill less that all of the window's width, you should set the width attribute for it as well.
<ul class="nav navbar-nav" style="float: right; width: 800px;">
...
</ul>

Directive inside partial appears with a bar on top

I am creating an UI using Angular on the front end. I have a directive which is the navbar. Since I am using ngRoute, I have used that directive inside my partial for /home. Everything works fine, but the navbar does not start from the top of the page. Instead there is a small pane below which the navbar starts. I want it to be something like how the stack overflow navbar in the top is.
This is my index.html
<body>
<ng-view></ng-view>
</body>
I've tried by using ng-view inside div but still it does not work.
home.html
<nav-bar></nav-bar>
<div class="container">
<div class="row-fluid">
<div class="col-md-12">
<div class="well well-sm">{{flashMessage}}</div>
</div>
</div>
<div class="row-fluid">
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<a href="#toparentnode">
..
</a>
<br/>
<p>nodes list goes here</p>
</div>
<div class="col-md-9 pre-scrollable scroll-pane">
<table class="table table-striped table-bordered wrap-table text-center">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
<tr>
<td>Value2</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
<tr>
<td>Value3</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
<tr>
<td>Value4</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
navbar.html ( which is the templateUrl for navBar directive )
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 navbar-right" href="#/">
<img style="max-width:100px; margin-top: -7px;" src="images/logo.png" alt="Logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span> Home<span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I have used Twitter bootstrap and one css named signin.css which is one found in the official website example - css
This is the unnecessary pane in the top
But I want it to look like how stack overflow has the navbar.
I've tried adding the navbar directly to the main index.html and it works as expected. This unnecessary pane appears only when I use it as a directive. Hope my question is clear.
from CSS try removing
body {
padding-top: 40px;
}
ViChU Hi there.
Can you give this a try to see if it helps you here.
Add navbar-fixed-top
<nav class="navbar navbar-inverse navbar-fixed-top ">

Bootstrap navbar height changed on inserting brand image

I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
Here is my attempt at getting a Navbar with transparency and fixed to the top.
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" />
<button id="topbtn" type="button" 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>
</button>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li> <h5> Discover </h5>
</li>
<li> <h5> Blog </h5>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li> <h6> Login </h6>
</li>
<li> <h6> Signup </h6>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
There are a few things affecting the height of the navbar:
div class="navbar-inner" (5px padding)
img class="brand" (10px padding)
the size of the image
You can remove the padding by:
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
div.navbar-inner {
height: 10px;
}
Use something like this:
.brand {height: 25px;}
Demo: Fiddle

How do you keep TwitterBootstrap's navbar fixed on top of the screen for applications with very long vertical page layouts?

I downloaded the bootstrap template from http://www.initializr.com/
My question is how do I keep the navbar fixed on top of the screen whenever I scroll down to the footer of my web page? To have a better idea of what I'm trying to achieve I made a screenshot.
example : On a mobile device perspective the NAVBAR is fixed
example : When I scroll down to the footer of the page I want the NAVBAR to stay fixed on top of the screen. As you can see the NAVBAR fails to stay fixed on top of the screen.
CODE:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Product and Services
</li>
<li>
Investor Relations
</li>
<li>
Get Support
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Search">
<button type="submit" class="btn btn-default">
<i class="icon-search icon-black"></i>Go
</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
How do I achieve this?
Just wrap the navigation bar inside a div and add these css classes to it style it as class="navbar navbar-fixed-top"
Example: http://jsfiddle.net/codovations/Uy5tt/show/
P.S: remove show from the end of the url to see the html
Update: Basically this is what they apply to the div to make it fixed on the top.
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
top: 0;
}