I am using a bootstrap template, and I cannot for the life of me figure out how to get my navbar text to get to the bottom-center of the screen. I have tried editing the bootstrap css for .navbar, .navbar-right, etc with vertical-align: bottom. It stays at the top no matter what.
Here is a link to the bootstrap template http://startbootstrap.com/template-overviews/landing-page/
And here is the code:
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<!--a class="navbar-brand topnav" href="#">Start Bootstrap</a> -->
<img src="img/RyanIsGreat.png" width=200px height=100px>
</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 navbar-right" >
<!--Here is what I am trying to bottom-center align
The about, services, and contacts all appear
on the right, as is shown in the image-->
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Use the navbar-fixed-bottom class..
<nav class="navbar navbar-default navbar-fixed-bottom topnav" role="navigation">
<div class="container topnav">
...
http://www.codeply.com/go/RBR3Hsg5bH
Related
I'm new and I don't speak english very good but I think that You can understand me and help :). I just started my adventure with bootstrap.
So... my navbar when has only 4 /li/ work with all screen sizes.
Here is the code:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">Business Casual</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>
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
But the problem is when I modify navbar and add for example 2 more /li/ like this:
<!-- Navigation -->
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<a class="navbar-brand" href="#">Health</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>
Main menu
</li>
<li>
<a href="#>Doctors</a>
</li>
<li>
Presciprions
</li>
#if(Auth::check())
<li>
Panel
</li>
<li>
Logout
</li>
#else
<li>
Login
</li>
<li>
Register
</li>
#endif
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
My navbar is not responsive with screen between 768 and 992 / and / 992 and 1200. I think, because It doesnt work on Tablets and my navbar is curling - I would like to be always on one line, no matter witch size screen is. Where is my mistake?
Link to page
Please add this code to your custom file css
#media screen (min-width: 768px) and (max-width:1200){
.nav>li>a {
padding: 36px 5px;
}
}
Why my button doesn't want to work when browser window collapsed? I mean once hamburger menu button is clicked no menu appears.
Here is my HTML:
<html>
<head>
</head>
<body>
<!-- Navbar style available in Bootstrap framework-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="http://codepen.io/ekilja01"><img id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
I guess everyone is fine until this point
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active" id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
The navbar that I have managed to create is working just fine. However, when I collapse the navbar by re-sizing the window it disappears as I try to open the menu in that view.
Why is the drop-down menu disappearing in mobile view. What am I doing wrong?
HTML code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<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">
<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 page-scroll" href="#page-top">Kirori Mal College</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 navbar-right">
<li class="dropdown">
Why Recruit? <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Why Recruit?</li>
<li>Demographics</li>
<li>Faculty</li>
<li>Academics</li>
<li>Alumni</li>
</ul>
</li>
<!-- End of nav bar tabs -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Link to Website and
Link to CSS file.
I have created a navigation bar with brand name and search box on left side and menus on right side.
Here is the bootply link
This is good on large screens, but on small screen, I want to display this as two bars on top, first one with the left content (brand name and search bar) and second one with the right content (menus). Can I do this just using bootstrap classes?
Try this:
DEMO
Use hidden class
<nav class="navbar navbar-default fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<div 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>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="hidden-xs hidden-sm">
<ul class="nav navbar-nav navbar-right">
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default hidden-md hidden-lg" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>
</div>
</nav>
this will be acheived by add another button for collapsing, look at this demo , other things will be ur work around
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
How can i make a nav bar like this in bootstrap
I tried this code:
<!-- Navigation bar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- Navigation bar content -->
<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>
<!-- Organization name -->
<a class="brand" href="/">Test</a>
<!-- Tabs -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><i class="icon-pencil icon-white"></i> Test</li>
</ul>
<!-- Sign in -->
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li>
<a href="#login_modal" data-toggle="modal" >Sign In</a>
</li>
</ul>
</div>
<!-- /.Tabs -->
</div>
</div>
<!-- /.Content -->
</div> <!-- /.Navigation bar content -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!-- Left Navbar -->
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
</div>
</div>
</div>
<div class="span10">
<!-- Right Navbar -->
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
</div>
</div>
</div>
</div>
</div>
Which will result to this:
I tried also in-line styling but I red in the net that it is not a good practice, I also tried overidding the classes that ruin the bootstrap. It has spaces between. Is't possible to do this with just bootstrap or no inline styling?
The space that you see between columns is called Gutter Width. I had the same problem in one of my projects. If you don't want to modify any CSS, then I suggest you get a customized bootstrap. You can modify the Grid System.
Customize Bootstrap at http://getbootstrap.com/2.3.2/customize.html