Creating a Bootstrap twin navbar, only 2nd row collapsible - html

I want to create a twin navbar (two rows) with Bootstrap.
The navbar template doesn't really meet my design goals, which look something like:
(this demo)
+-------------+--------------------------------+
| title | | this part does not collapse
+-------------+--------------------------------+
| two-line | two-line | | on smaller screens,
| button | button | | collapses to 'hamburger' menu
+----------------------------------------------+
I am having difficulty collapsing the 2nd row into the hamburger menu.
My code is: (did this manually to achieve look as above)
<table>
<tr>
(1 cell for title, 1 cell for rest of row)
</tr>
<tr class="nav2">
<td style="width:100%;" colspan="2">
<table style="width:600px;">
<tr>
<td style="width:100%;">
<div class="container-fluid">
<div class="row">
<a href="#"><div class="col-xs-3">
<span class="link">Heatmap</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Basic<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Group-aware<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Auto Group<br>Identification</span>
</div></a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
(...)
I would replace that whole container-fluid with a navbar, but then I wouldn't be able to achieve the design as linked in: (demo). I tried adjusting the CSS parameters, but wasn't able to get the look and precise measurements.
Any way to make the 2nd row collapsible on mobile, manually or otherwise, while preserving the design?

Here's a slightly different idea. I like Macsupport's second navbar from your original design, but the toggle button on a second row on a mobile device doesn't make a lot of sense to me. Especially on mobile where space is limited. Having a hamburger button on the far right doesn't really detract from the logo at all.
Here's a pretty standard navbar example, except I've added the class .twoRow
<div class="navbar navbar-inverse twoRow">
<div class="container">
<!-- Header -->
<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="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
For the CSS, on a widescreen device, just clear the .navbar-collapse float so it creates a new line:
#media (min-width: 768px) {
.twoRow .navbar-collapse {
clear: left;
}
}
Working Demo in jsFiddle
Which will look like this:

Here is a rough example:
/* CSS */
.nav2 {
margin-top: 50px;
}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
<nav class="navbar navbar-inverse nav2" role="navigation">
<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>
</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
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Related

Align Navbar Fully Left and Split into 12 Sections

I would like my navbar to be divided into 12 sections with each element taking up 1 section, i.e have 12 elements in the navbar. I would also like them to start from the very left of the screen, instead of what I currently have in the image below;
I thought container-fluid and navbar-left would align the elements fully to the left of the navbar but I am really struggling in trying to move them over.
What I Have Tried (my code so far)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container container-fluid">
<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="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I able to A) Align all the elements in the navbar fully to the left and B) Divide the navbar into 12 "sections" that each element shall take one of?
I am using Bootstrap v3.3.7.
Add the row class to the container:
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container row">
<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="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
jsFiddle
A)
I think you have to take away the container class in the first line, like that:
<div class="container-fluid">
B)
You can add the col-md-1 Bootstrap class to the li elements, like that:
<li class="col-md-1">Directories</li>
If you inspect the navbar you created you will find some padding/margin left generated by bootstrap, just add your own class to that element and set margin or padding you want. You can create as many li elements as you want.

Why am I getting too much pixels for padding using Twitter Bootstrap?

I have made a header prototype using bootstrap. The problem is I couldn't understand why I have such big padding for the right side. If I add one more letter after Корзина HTML gives me a new line. How could I get rid of this free space? Here is the image
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation -->
<!-- Heading beginning -->
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div>
<div class="col-md-8">
<input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm">
<button type="button">Search</button>
<span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span>
<span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span>
</div>
<div class="col-md-8">
<small>Например, лекарства для диабетиков</small>
</div>
</div>
<nav class="navbar navbar-inverse" 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="#">Start Bootstrap</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- Heading end-->
</body>
You need to increase the col-md-8 to col-md-10 and float the elements to right to remove empty space from right.
here is the updated demo

Bootstrap full responsive navbar with mini logos for each menu item

I hope you all are fine. I am new here, and I have a question. I am working with mvc , with c#, html, css and boostrap.
I am trying to develop a responsive nav bar. It contains icons for each menu item. For example, home (a house icon with words under it), item 2, item 3 and so on.
when displaying the nav bar in movile devices ( small screens) the icons in the hamburguer menu continue to be displayed as big as used to be in the computer´s version.
I would like to adapt the icnons sizes(the brand logo and the items) in the nav bar for each screen size..here you are the code:
<nav class="navbar navbar-default 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="brand">
<img class="img-responsive" src="http://Brandlogo.com/brandlogo.png alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#Url.Action("action1", "item1")">
<img class="img-responsive" src="/images/item1.png" alt="imagen"> item1
</a>
</li>
<li>
<a href="#cont-4">
<img class="img-responsive " src="/images/item2.png " alt="imagen">item2
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
thank you for your help
You should check out media queries
It enables you to change certain css styles based on screen size.

Bootstrap navbar href to another page does not work

li href with '#' works fine but I'd like to write url of the another page. I tried to add some divs, forms or btn from bootstrap but that solution makes my page messy(unexpected margins or something strange).
I have no idea how to solve the problem.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="wow fadeInRight" data-wow-duration="2s">
<a class="navbar-brand" href="#home"></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<!-- Sklep -->
<li>Sklep
</li>
<!-- SOCIAL -->
<li style="padding-top:9px; margin-left:50px;">
<a href="https://www.facebook.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/facebook-2-32.png" alt="">
</a>
<a href="https://www.youtube.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/youtube-2-32.png" alt="">
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I don't completely understand your question, however when I have formatting issues with href tags, I tend to use JavaScript:
<div onclick="http://ebay.com" />
Perhaps if you explain your question a little better I may be able to help.

bootstrap Responsive navbar hidden parts not going into button

Here is the code for navbar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="index.html">EasyUniv</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>Services</li>
<li>Campus</li>
<li>Advertise</li>
</ul>
</div>
</div>
</div>
</div>
The example is at: www.easyuniv.com/staging
when you make the screen smaller it hides the nav buttons correctly but they do not go into the little drop down like it should. also at certain widths there is weird padding.. been trying different things and can't get these to work.
Thanks
You need to include jQuery before bootstrap.