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.
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 have navbar with menu, which changed to hamburger menu on mobile version. Also, I have two icons for language, which aren't in navbar, but I need them in hamburger menu.
Option to put language icons in doesn't work because I need them to the right, and then all menu list change the place
<nav class="navbar navbar-dark navbar-inverse" data-toggle="affix" id="navbar-spy" style="border:0px; border-radius:0px">
<div class="container-fluid">
<div class="zastave" align="right">
<img src="slike/srb.png" alt="">
<img src="slike/eng.png" alt="">
</div>
<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>
<span> <img class="logo_nav pull-xs-left" src="slike/logo.png"></span>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav p-t-1">
<li>MENI</li>
<li>ENTERIJER</li>
<li>CENOVNIK</li>
<li>REZERVACIJA</li>
<li>KONTAKT</li>
<!--<li>KETERING</li>-->
</ul>
</div>
</div>
</div>
</nav>
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?
I am using bootstrap for a while ago and i get stuck how to separate navbar and div having container class having full width. Actually navbar hides the div having container class. My code:-
<nav id="myNavbar" class="navbar navbar-fluid navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Toggle Navigation</a>
</div>
<div class="collapse navbar-collapse pull-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h1>HELLO WORLD!</h1>
</div>
I also tried to put navbar and container in different div having float element left but no luck it still overlap it.
Please help.
I am trying to push the navbar line (and obviously the content as well) down according to logo height. Here is my HTML code:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
What I want:
What I get:
Note: Custom css classes have not much to do with the positioning.
You may try something like this:
HTML:
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
CSS:
a.navbar-brand { /*or add another class instead of changing this*/
display:block;
margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */
}
Just keep some margins on top and bottom of that <a> tag. Don't depend on other elements for margin of that <a> tag, instead apply cssrule on itself for it's margin.
Or just put in inside another .row:
<div class='row'>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
</div>
Close your the <div class="container"> and open a new container with a margin top around the second row of the nav bar.
Bootply example
Updated HTML:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
</div>
<div class="container new-nav-line">
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
.new-nav-line{
margin-top:20px;
}