I got banner 750x100 above the navbar. When I minimize window to col-xs, I got two problems -
1) Navbar-brand skip under the line. (Red line)
2) Banner is too small, I want align it to center or enlarge the height. (Blue line)
<div class="container-fluid banner text-center">
<div class="row">
<div class="col-md-12">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x100" alt="" style="margin: 0 auto;">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<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="#">Some long texthere</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</div>
</nav>
It's possible to arrange place as I wrote, or should I try other way?
Related
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
I am currently learning Bootstrap and basic HTML at the moment, and I would like to have a navigation button (hamburger) to simplify my navbar for mobile. It's all there, when I resize my window on my desktop, but it does not work when I look on my nexus. Do I have to add a media query? I have just heard of them. Here is what I have in HTML
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="logo">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="delightful-header"><p>Delighful Days Daycare</p></div>
<div class="tagline"><p>"Where Everyday Is Delightful"</p></div>
</div>
<nav class="col-sm-12 col-md-12 col-lg-6">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="active">ABOUT US</li>
<li>PRICING</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
</nav>
I am new to Web Dev, and i am facing an issue wrt to Div : https://jsfiddle.net/debashis_gt540m/17mmmxps/2/
The three div's at the end have some amount of spacing in between them, I've tried with inserting all 3 div's within a single one, but it didn't help. Anyone ? I want to get rid of the spaces between the 3 div's.
The code is:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul></div>
</div>
</nav>
<div>
<div class="container-fluid bg-1 well">
<div class="row">
</div>
</div>
<div class="container-fluid bg-2 well">
</div>
<div class="container-fluid bg-3 well">
</div>
</div>
.well {
margin-bottom: 0px !important;
}
the 3 divs have bottom margins, that's what adding the space. add this css:
.container-fluid{margin-bottom:0px;}
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'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.
this is my code so far:
<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
<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="#">Project name</a> -->
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
this is what is happening now because is fixed-top
[http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]
thanks in advance.
Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.
<div class="navbar navbar-inverse 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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hope this helps :)