Bootstrap Navbar <li> Spacing - html

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

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/

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>

Twitter bootstrap class navbar-collapse erases the <ul>

I am trying to learn Bootstrap and I am currently coding the navbar of my new website. But everytime I put a div with nav-collapse navbar-responsive-collapse collapse classes the links in the UL of the navbar just dissapear. Here is the code:
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a class="navbar-brand" href="#">FUTURE LOGO</a>
<div class="nav-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home white"></span> Domu</li>
<li>Section</li>
<li>Section</li>
<li class="dropdown">Section<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown-header</li>
<li>Subsection</li>
<li>Subsection</li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
</ul><!--End nav-->
</div><!-- End navbar-collapse-->
</div> <!-- End container-->
</div> <!-- End navbar-->
I have just figured it out. In the new version of the bootstrap, there is nothing like nav-collapse but It is changed to navbar-collapse.
Include java script file which are in ./js folder.

How to: Non collapsing navigation items Bootstrap 3

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!

how to collapse bootstrap navbar from the side

How to collapse bootstrap navbar from the side?
If you view this Bootstrap template self starter on a phone or by reducing your browser windows width then the navbar only shows project name. You can then view the whole menu by clicking on the small button on the side.
How can I change this to something similar to what stripe.com has for mobile browsers?
there navbar is from the side
Bootstrap 3
Take a look at this "Off-canvas" sidebar example on Bootply. You'll see that the nav-collapse fills in from the right-side on smaller viewports.
Bootstrap 4:
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
Try this
Befor you have bootstrap-combined.min.css file and <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head section
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</li>
<li>Documentation</li>
<li>Help & Support</li>
<li class="button">Sign in</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
Fiddle
Jsfiddle