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
Related
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
I have a bootstrap container like below.
in one col-xs-6, I have my logo and in other col-xs-6, I have cart icon and my toggle menu.
When I resize my browser window, I want to have my logo to have fixed position, but I want to move my cart icon and my navigation together.
<div class="header-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-6">
<img src="assets/logo.png" alt="">
</div>
<div class="col-xs-6">
<span>1</span><i class="fa fa-shopping-cart"></i>
Menu <i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
Here's the fiddle for the same. for some reason, It is not coming in the same line of logo as well.
Please help.
You need to overwrite your .menu-toggle class to {display:inline-block;}
Instead of your code structure you can write,
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" class="logo"><img src="assets/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="">1</li>
<li>Menu</li>
</ul>
</div>
</div>
</div>
in this case menu will collapse in small screen.
I am trying to make the picture 100% but it wont work.
Code:
html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
css:
.headerimg {
width: 50%;
height: 100px; }
It would be very helpful if anyone can help. I am usually able to do it but for some reason I am unable to do it this time. Thanks again for your help.
Just change CSS to:
.headerimg
{
width: 50%;
height: 100px;
}
img {
width: 100%;
}
It will make Image 100% in width.
look this : http://jsfiddle.net/cadh3vv9/
try the follow code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img style="width=50%" src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
I styled the image to 50% width you also want it to be 100 px height well thats wrong, its something like telling the browser show a pic of a roadkilled dog, you must define what you preffer, width or height because image resize uses one of these values to resize correct
i have a menu that look like google nexus 7 on the top of my page! i have another navigation menu in the middle of page. when i click on google menu it appear under the navigation menu. how can i show it upon of navigation menu?
here is my code:
<body>
<div id="page">
<div id="header">
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="جستجو" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">دانلود</a>
</li>
<li><a class="gn-icon gn-icon-article">اخبار</a></li>
<li><a class="gn-icon gn-icon-pictures">عکس ها</a></li>
<li><a class="gn-icon gn-icon-cog">مدیریت</a></li>
<li><a class="gn-icon gn-icon-help">راهنمای سایت</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li><a class="login-page" href="http://tympanus.net/codrops">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>حساب کاربری</a></li>
<li><a class="login-page" href="http://tympanus.net/Development/HeaderEffects/">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span><span>تماس با ما</span></a></li>
</ul>
</div><!-- /container -->
</div> <!-- /header -->
<div id="wrapper">
<div class="container" id="main-container">
<nav class="navbar navbar-default">
<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" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- /container -->
</div> <!-- /wrapper -->
</div> <!-- /page -->
here is first picture of my problem
and here is the second
it's hard to tell 100% without your CSS but it appears to be a z-index issue. Try bumping up your z-index to a high number:
z-index: 1000000; //some high number
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>