Bootstrap right navibar messy how to fix this? - css

I am trying to add the
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?

You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.
[body > .container > .navbar > .container]
To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.
change to [body > .navbar > .container OR .container-fluid]
ONE MORE THING TO SAY
[Practice makes perfect]

It is not going outside of the navbar. You have nested two container. The padding in containerplays the part here.
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
container in bootstrap is 1170px width having padding-right:15px , padding-left:15px .( I am viewing it in a screen resoultion > 1200px) .Your navbar have a total space of 1140px now (1170px - 30px = 1140px) which has a background colore property. As you again adding a container , It is occupying a space of 1170px now which exceeds 1140px. So in both side , a extra 15px white space gote added. Furher , The nested "navbar-right" has "margin-right:-15px" that push your nav further.
Simply construct this way :
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right ">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>

This is how a bootstrap navbar is made:
Navbar with no container wrapping it, but a container-fluid inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts
</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
</li>
</ul>
</div>
</nav>
P.S.: view the results in full page for better viewing

Related

Footer coming on top of forms. Bootstrap3

My problem is - footer is coming on top of every form.
My base.html.twig looks like this:
<div class="footer navbar-default navbar-fixed-bottom" id="footer">
<footer class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Regulamin</li>
<li>Polityka prywatności</li>
<li>Kontakt</li>
</ul>
</div>
</footer>
And its the look of the page footer
I think the answer would be similar to the case with the navbar-fixed-top. Could you try and set padding-bottom: 70px to your body element?
As it stated in doc
Have you tried to place this in your footer? clear:both;

Collapse Menu in Bootstrap3 without Toggle

Is there a Bootstrap3 component that simply collapses a menu at a breakpoint without adding a toggle. For example, if I have a horizontal menu that looks like this on desktop
at screen widths below 768px I would like it to simply stack without collapsing into a toggle like this
Any thoughts?
Remove the collapse button and the navbar-collapse class. From the getbootstrap.com examples, something like this should do the trick:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
You will have to add a media query to make sure that padding is added to the content in mobile display.
I have made a Bootply here where I added the following CSS to make it work:
#media screen and (max-width: 768px) {
#wrap > .container {
padding-top:200px;
}
}

Navbar row not vertically aligned

I am trying to make a navbar which hides text on smaller screens. I cannot get the bar to align correctly!
http://jsfiddle.net/blisstdev/ZrA3u/10/
http://jsfiddle.net/blisstdev/ZrA3u/10/embedded/result/
As you can see, the left side is lower than the right!
Also, the first list element of the 'ul' on the left does not fill the size of the 'ul' container, yet all the other list elements do. Why is this?
Thank you very much!
<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
<div class="container-fluid header-top">
<ul class="navbar-nav navbar-left pull-left list-inline contact-links">
<li class="header-link-container"><a class="visible-xs call-link" href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a><span class="hidden-xs header-link-text">1-800-GARMANTS</span></li>
<li class="header-link-container"><a class="to-do magento-add-in chat-link" href='****live chat**'><span class="glyphicon glyphicon-comment"></span><span class="hidden-xs header-link-text">Chat</span></a></li>
<li class="header-link-container"><a class="magento-add-in email-link" href="mailto:ryan#garmants.com"><span class="glyphicon glyphicon-envelope"></span><span class="hidden-xs header-link-text">Email</span></a></li>
</ul>
<ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
<li class="header-link-container"><a class="account-link" href="my-account.html"><span class="glyphicon glyphicon-user"></span><span class="hidden-xs header-link-text">My Account</span></a></li>
<li class="header-link-container"><a class="cart-link" href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span class="hidden-xs header-link-text">My Cart</span></a></li>
</ul>
</div>
</div>
On small screens, the anchors are set to display: block, while this is not the case for the anchors in the right hand list. Just make sure to apply the same styles to each list and they will behave in the same way.
I updated you FIDDLE you need to set the same padding to the first <li> item in the left nav-bar like this
#media (min-width: 768px) {
.contact-links.navbar-nav > li.header-link-container:nth-child(1) {
padding-bottom: 15px;
padding-top: 15px;
}
}
should do it.

Using twitter bootstrap to create sidebar in master-detail UI

Using twitter bootstrap, I am trying to create a sidebar in a master-detail UI with the code below. The problem is that the sidebar is always appearing right above the main content or details section as shown in the image below. Any suggestions on fixing this will be helpful. thanks.
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span9 well">
</div>
</div>
</div>
This is the only custom CSS used:
body{padding: 60px 10px 10px 10px;}
Solved
What caused my problem was that, my <div class="container-fluid"> was not wrapped with an outer row class eg <div class="row-fluid">. Once I did that, everything was fine.
Your missing a closing quote here:
<ul class="nav nav-list span3 well pull-right>
Twitter Bootstrap now provides examples, which contain a Master/Detail template. There's no need for pull-right or the the quote hack. Here's adaam's example with the hack removed, working perfectly: http://jsfiddle.net/2Zy6D/
As well as Kevin's fix:
<ul class="nav nav-list span3 well pull-right">
Based on the unknown that you might have other code effecting the width of the divs causing them to sit on top of each other use a lower span number to compensate like this (span numbers must add up to the Bootstrap maximum of 12 i.e. 9 + 3 in your code above [under normal circumstances would work]):
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span8 well">
</div>
</div>
</div>
Wouldn't usually advise this as it's not strictly correct but as this is just for a backend page it seems it will be O.K. So here's a jsFiddle (bit hacky but oh well): http://jsfiddle.net/7MD6m/

Twitter Bootstrap - full width navbar

Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?
Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">
Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.
Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<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="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>
Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>
You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>
Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>

Resources