How to: Non collapsing navigation items Bootstrap 3 - html

I have searched high and low for this, on SO too but didn't find the "correct" answer.
Just figured it out myself.. Thought to share this, hope it helps someone..
Problem with BS3 is that it's Mobile first, which is a good thing, usually.. It's just that I need a few "default" options in the navbar regardless of the collapse state. Just like BS2.
So how can we do this?

One thing is obvious looking at the html code, the .navbar-header stays where it is, it doesn't collapse. Another thing, the magic collapse button has some way of hiding itself, probably CSS but hey, the idea is to abstract this layer so we don't have to worry about it..
But we can take advantage of this, let's place the links I want to show in there, they won't collapse.
What you will see is that your list items will end up vertically, that's not what you want.. So why does it do that?
Well.. If you use Firebug or some other development inspector, you will find that these items have been set to display : block;, that is making them the width of the screen pushing each next item down.
We need to change that behaviour. So let's add a new class to the ul that we can define in our custom CSS. I named it no-collapse but you can name it whatever you want..
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle">
<span class="sr-only">Hamburger menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- THIS IS WHERE THE MAGIC HAPPENS! -->
<ul class="nav navbar-nav no-collapse">
<li>Apple
</li>
<li>Banana
</li>
</ul>
</div>
<!-- THE STUFF IN THIS DIV WILL COLLAPSE.. -->
<div id="bs-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">More Fruits <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Citrus</li>
<li>
Lemon
</li>
<li>
Orange
</li>
<li class="divider"></li>
<li class="dropdown-header">
Also a fruit
</li>
<li>
Tomato
</li>
</ul>
</li>
<li class="dropdown">Veggies <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Green stuff</li>
<li>
Spinache
</li>
<li>
Lettuce
</li>
<li class="divider"></li>
<li class="dropdown-header">Other stuff</li>
<li>Carrot
</li>
<li>Romenesko broccoli
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
This works
</li>
</ul>
</div>
</div>
</nav>
You'll need a modification, add a CSS (or LESS/SASS) after the bootstrap style sheets.
Add this CSS:
.no-collapse li, .no-collapse li a
{
text-align : center;
float : none;
display : inline-block;
}
Now in Bootply it would look like this: http://www.bootply.com/render/133885 source here:http://www.bootply.com/133885
Now we can have the healthy Apple and Banana on the screen on our mobile devices without resorting to the hamburger menu!

Related

bootstrap nav bar nested <ul> not showing properly under parent

When you view the page as mobile the main navigation bar does not show the drop downs properly underneath their respected parent link. I have search and cannot seem to find a solution. Currently the dropdown menus show under and to the left of the main link. You can see a live demonstration at http://beta.lofbc.org
<nav class="navbar navbar-default">
<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="#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 hidden-lg hidden-md hidden-sm" href="#">Life of Faith Bible Church</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav nav-justified">
<li>#Html.ActionLink("HOME", "index", "Home")</li>
<li role="presentation" class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Church Services", "ChurchServices", "About")</li>
<li>#Html.ActionLink("What to Expect", "WhatToExpect", "About")</li>
<li>#Html.ActionLink("What we Believe", "whatwebelieve", "About")</li>
<li>#Html.ActionLink("Leadership", "Leadership", "About")</li>
</ul>
</li>
<li role="presentation" class="dropdown">
MINISTRIES <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Children", "Children", "Ministries")</li>
<li>FAA</li>
<li>God's Girlz Club</li>
<li>AfterShock Youth</li>
<li>Young Adults</li>
<li>Men of Impact</li>
<li>Women</li>
<li>God's Golden Girls</li>
<li>The Great Giveaway</li>
</ul>
</li>
<li>#Html.ActionLink("EVENTS", "", "Events")</li>
<li role="presentation" class="dropdown">
MEDIA <span class="caret"></span>
<ul class="dropdown-menu">
<li>Live Stream</li>
<li>#Html.ActionLink("Service Archives", "ServiceArchives", "Media")</li>
<li>TV Broadcast</li>
<li>Photo Album</li>
</ul>
</li>
<li>STORE</li>
<li role="presentation" class="dropdown">
CONTACT <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Send us a Message", "index", "contactus") </li>
<li>Submit Testimony</li>
<li>Prayer Request</li>
<li>#Html.ActionLink("Give", "Donate", "Giving")</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This is happening because your nested <ul> tags are absolutely positioned. An absolutely positioned element cannot move relatively positioned elements so even if you moved it across it will simply appear on top of your existing buttons.
My fix would be to apply the following css to the nested <ul> tags:
#media (max-width: 767px) {
.nav-justified>.dropdown .dropdown-menu {
position: relative;
width: 100%;
background-color: #1c5168;
}
.nav-justified>.dropdown .dropdown-menu li {
color: lightblue;
text-align: center;
}
}
Placing it inside a media query will stop the css from applying to your menu on desktop layouts.
You will still have to add more styling to get the menu to look nice but this will fix your positioning issue.
Just for reference here is a good article about the position property with examples of how it works: https://css-tricks.com/almanac/properties/p/position/

Minimizing the browser window should not hide the last item in the navbar menu

I have the following bootstrap menu, the last item in this menu is "More" which is a dropdown contains the left items from that menu, the problem is when user minimize the window the last items start hiding include "More" item.
So my question is: how to avoid the last item ("More") from being hide?
I searched the internet I could not find any solution, I found many are talking about pull left but it did not work for me.
Here is my code:
<div class="collapse navbar-collapse " id="category-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li >
a
</li>
<li >
b
</li>
<li >
c
</li>
<li >
d
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown">
More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
Any suggestion please?
Feel free to ask for more information.
I'd check the styles over - could be some class name with a breakpoint for display:none on that class. Have a look in Devtools and see what it's throwing out?
As far as your code goes, it looks fine so just check over the CSS, positioning and display, etc.
<div class="collapse navbar-collapse" id="category-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>

Submenus (dropdowns) truncated and not displayed on mobile devices

I'm developing a web with Ruby on Rails, using Twitter-Bootstrap and Simple-Navigation gem. The navigation menu works fine on any browser, something like this:
When displaying the web on a mobile device and clicking the nav button, the whole menu is displayed on vertical block, enlarging the size of the header to a max. height than can hold the menu. The problem is that opening any submenú increases the size of the menu, overflowing and hiding the last options, as you can see in the comparison:
Any idea?
The code of nav_menu on the mobile version:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="brand">
<img alt="NRG Consulting logo" src="/assets/nrg-logo.png" title="NRG Consulting">
</div>
<span class="development" id="rails-env"><span>development</span></span>
<div class="container nav-collapse in collapse" style="height: 496px;">
<ul class="nav pull-right align-top">
<li>
<a href="manual_path">
Help
</a>
</li>
<li>
Español <img alt="Switch to English" class="lang" data-locale="en" src="/assets/lang-es.png" title="English">
</li>
</ul>
<ul class="nav pull-right align-bottom">
<li id="home">Home</li>
<li id="formulas">Formulas</li>
<li id="deals">Deals</li>
.
.
.
<li class="active dropdown" id="admin">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li id="subscription">Subscriptions</li>
<li class="divider" id="nav_header"></li>
<li id="historic">Recalculate historic prices</li>
<li class="divider" id="nav_header"></li>
<li id="export">export data</li>
<li id="import_tuple_eod_check">Check data</li>
<li class="divider" id="nav_header"></li>
<li id="alerts">Alert</li>
<li id="product_price_alerts">Price alerts</li>
<li id="import_tuples">Import tuple</li>
<li id="fixing_errors">fixing errors</li>
<li class="divider" id="nav_header"></li><li id="redis">Resque</li>
<li id="copycopter">Translate</li>
<li class="divider" id="nav_header"></li>
<li class="active simple-navigation-active-leaf" id="client">Clients</li>
<li id="user">Users</li>
<li id="user_activities">User activity</li></ul></li>
<li id="user">Users</li>
</ul>
</div>
</div>
</div>
</div>
Collapsed nav menu appears to set a fixed height value when displaying nav menu, preventing the div to enlarging when submenu dropdowns display:
<div class="container nav-collapse in collapse" style="height: 496px;">
Adding this lines to style.css set height property to auto, allowing the div to enlarge when needed, showing the whole menu:
.container.nav-collapse.in.collapse{
height: auto !important;
}
Perhaps there is a cleaner solution, but this worked pretty fine for me, and don't want to change Bootstrap code itself.
A link displaying some usefull info about similar issues.

megamenu dropdown bootstrap mobile collapse

So I have a dropdown that works and scales down perfectly fine thanks to Bootstrap.
The client however wants the collapse to act like an accordion.
I'm trying to get to something like this. Avada's main nav menu-scaled down into mobile: Note how the 'Home Samples' header goes missing and becomes a toggle with the list items as its dropdown. How could I find out what was used to create this?A push in the right direction would be appreciated.
This is a fiddle of what i got.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="header1"> Apparel
<ul class="dropdown-menu mega-dropdown-menu row mega-dropdown-menu-1">
<div class="dropimg"><img class="img-responsive" src="images/dropdown.jpg"> </div>
<li class="col-sm-2">
<ul>
<li class="dropdown-header">APPAREL</li>
<li class="dropdown-header_a">ALL PRODUCTS
<ul class="dropdown-menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">BRANDS</li>
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CATEGORY</li>
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CLEARANCE</li>
</ul>
</li>
<li class="col-sm-1">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">SPECIALS</li>
</ul>
</li>
</ul>
</li>
</ul>
In the fiddle. the first in the dropdown, i've tried to make it a dropdown like normal. Is there a way to make it work without the use of java?
[EDITED]
With a little research and patience, I managed to add a slightly similar accordion-like transition effect to the bootstrap dropdown. I also managed to fix a visual bug that happened when the dropdown slided up too fast.
With bootstrap 3, they exposed quite a few javascript events for us to tinker with. The events that we will use are: 'show.bs.dropdown' and 'hide.bs.dropdown'. Learn more about their javascript events. Or check out the Dropdown events.
Inside each event, we will add a few jquery lines to give the dropdown our desired effect. The jquery events are: slideDown and slideUp.
All there is left for you is to overwrite bootstrap's default navbar color and add your own styles to it.
Here is the result (Click the phone icon on the far right): Bootply example
Javascript/Jquery:
$(function(){
//Add OnResize event
window.onresize = myResize;
myResize();
});
//This finction will fire each time the browser is resized
function myResize(){
//Get browser/device height and width
var bWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var bHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//If viewport is lower than ipad, hence mobile
if(bWidth < 768){
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
//On Complete, we reset all active dropdown classes and attributes
//This fixes the visual bug associated with the open class being removed too fast
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
});
});
}
}
HTML/Bootstrap navbar:
<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="dropdown">
APPAREL <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
BRANDS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>CLEARANCE</li>
<li>SPECIALS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Bootstrap Navbar <li> Spacing

Ok I have looked all over the css and can't seem to figure out what is determining the width between the top level links on my navbar. I need to make them just barely smaller so when it adjust for a sub 900px screen it doesn't turn it into a 2 row navbar instead of the usual 1 row.
I tried something like navbar > li but had no success getting them to move. But to no avail so I am asking
Thank You here is my navbar code
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" 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>
</button>
<a class="brand" href="index.html">PC3</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
About Us <b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Services</li>
<li>Core values</li>
<li>Staff</li>
<li>How To Know God</li>
<li>Volunteering</li>
<li>Giving</li>
<li>Directions & Contact</li>
</ul>
</li>
<li class="dropdown">
Adult Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Personal Spiritual Trainer</li>
<li>Care Team</li>
<li>Hospitality team</li>
<li>Intercessory Prayer</li>
<li>Women's Ministry</li>
<li>Amplified Worship</li>
<li>Sermons</li>
</ul>
</li>
<li class="dropdown">
Student Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Just For Parents</li>
</ul>
</li>
<li class="dropdown">
PC Kids<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Videos</li>
</ul>
</li>
<li class="dropdown">
Life Groups<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Schedule</li>
<li>Leaders & Group Info</li>
</ul>
</li>
<li>Events</li>
<li>Missions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
I figured out what I was looking for, didn't look in the second css, which has the responsive css and didn't edit the padding for the .inner class.
That was my fault thank you tho