Bootstrap nav-bar aligned center - javascript

Here's my fiddle of my html/bootstrap code.
<body>
<h1 style="text-align:center">AntwerPay</h1>
<!--Navbar-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">AntwerPay</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Gebieden
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Gebied 1</li>
</ul>
</li>
<li>Alle Gebieden</li>
</ul>
</div>
</div>
</nav>
</body>
As you can see in my navbar everything is aligned real nicely to the left. This is a problem for me. I want the navbar-brand to be on the left, and i want the 3 other buttons to be centered. I have researched this a lot and found various .css codes but none worked for me.

You can do this using CSS, I've included a suggestion for manually adjusting the position of the items:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
/* You'd have to adjust this whenever an item is added to the nav-bar */
margin-right: 10%;
}
.navbar .navbar-collapse {
text-align: center;
}
This has been answered already here
Along with your (Again) updated fiddle here

use this snippet
.navbar-bav { float: none !important; text-align:center; }
.navbar-nav > li { display:inline-block; float: none !important; }
Updated fiddle
Remember
If you do NOT know how to make the navbar responsive, then implement the codes above in a #media (min-width: 768px) query in order not to fail the responsiveness of Bootstrap Navbar.

Hope this works for you:
#myNavbar {
text-align: center;
}
.navbar-nav {
margin: 0 auto;
display: inline-block;
float: none;
}
Make shure to keep an eye on the mobile view.

Related

Chrome shows error in bootstrap.min.js

Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
The navbar doesn't resize when using Google-Chrome's Toggle Device Toolbar. I found a similar question where the problem was solved by making sure the .js files are getting loaded properly. But in my case this doesn't work.
However, the same works fine in Firefox.
.navbar {
margin-bottom: 0;
background-color: #0E293C;
z-index: 99;
border: 0;
font-size: 14px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: 'Muli', sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
color: #19BBD5 !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #C6DAEC !important;
background-color: #0E293C !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
<nav 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="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Updates</li>
<li>About</li>
<li>How to use</li>
<li>Pricing</li>
<li>Contact</li>
<li>Find Us</li>
</ul>
</div>
</div>
</nav>
The website has been written by following this tutorial
The root cause of this issue was that I had an <iframe> element which was not getting loaded properly. Thus the Error404 box wasn't resizing.
In CSS I added overflow-x:hidden under body this made sure that navbar gets resized when I open my bootstrap website on screens of different sizes. And in my html contained the <iframe> element in container.

Bootstrap menu bar overlapping logo on collapse

When navbar collapse (when it shows the toggle icon), the menu (home, services, portfolio, about,contact) is over the logo. If I take the position:absolute from the logo (nag-bar-brand) the menu appears in the center. If there away to have the menu below the logo. I hope you understand my question. English is not my first language. Thank you.
HTML
<!--navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>`enter code here`
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="brand-image" src=""><img src="images/logo.png" class="img-responsive" alt="website logo">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!--end navbar-->
css:
.navbar {
background-color:#FFF;
border-radius: 0 px;
min-height: 85px;
}
.navbar-nav{
padding-top: 20px;
letter-spacing: 0.05em;
}
.navbar-nav > li{
padding-left:20px;
}
.navbar .nav >li > a:hover{
color: #19bcb9;
}
.navbar-brand{
position:absolute;
}
If the image is too big this will happen. Limit the image with max-height max-width
simply put the image size to 100%. this should work!
.img {
img-size:100%;
}

Bootstrap 3 - Dynamic affix and transparent collapse bar

I was looking for very long time for pretty solution for dynamic affix with Bootstrap 3 and finally my simply solution is below. Everything works great, except one feature. When i resize website to mobile and expand menu, whole list of menu items is transparent. When i starting scroll down, after the moment when navbar is affixed transparent problem does not exist. I read some posts that it can be caused by relative position for navbar but dont know how resolve this problem and dont loss my functionality.
<div id="nav-wrapper">
<div id="nav" class="navbar-inverse">
<div class="container-fluid">
<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>
</div>
<div class=" collapse navbar-collapse navbar-center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">ZESPÓL</li>
<li>ZAPLECZE</li>
<li>GALERIA</li>
<li>MATERIALY</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
</div>
<!-- navbar -->
</div>
js:
function myaffix() {
var affixoffset = $('.navbar-inverse').offset().top
$('#nav-wrapper').height($(".navbar-inverse").height());
$(window).scroll(function() {
if ($(window).scrollTop() <= affixoffset) {
$('.navbar-inverse').removeClass('affix');
} else {
$('.navbar-inverse').addClass('affix');
}
});
};
$(document).ready(function() {
myaffix();
$(window).on("resize", function() {
myaffix();
});
});
and part of my css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
#nav > .navbar-inner {
border-left: 0;
}
.navbar-toggle
{
float:none;
}
.navbar-header
{
text-align:center;
}
.navbar-inverse .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-inverse .navbar-collapse {
text-align: center;
}

Bootstrap navbar dropdown displaying menu-items horizontally

I've been working on a new project where a navbar required to be center of the page at top. I have the following html...
<div class="navbar navbar-inverse navbar-fixed-top center">
<div class="container navbar-inner">
<div class="navbar-header">
<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> <!-- //.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Project</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div> <!-- //.collapse -->
</div> <!-- //.container .navbar-inner -->
</div> <!-- //.navbar -->
and css, which sets the menu-items to center.
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
margin: 0;
padding: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align: center;
}
However the dropdown toggle function seems to display the options horizontally upon medium screen size. (can't post picture...not enough reputation~sorry!)
How can I get the dropdown toggle function to display menu-items vertically as a list (how the default should be) without affecting menu-items being centered on desktop screen size? Any help would be appreciated!!
You should wrap your custom CSS code inside media queries.
#media (min-width: 992px) will affect the elements only in desktop screen size. Learn more about the Grid system
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
margin: 0;
padding: 0;
}
#media (min-width: 992px) {
.center.navbar .nav,
.center.navbar .nav > li {
float: none;
display: inline-block;
*display: inline; /* ie7 fix */
*zoom: 1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top center">
<div class="container navbar-inner">
<div class="navbar-header">
<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>
<!-- //.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>About
</li>
<li>Project
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
<!-- //.collapse -->
</div>
<!-- //.container .navbar-inner -->
</div>
<!-- //.navbar -->

Aligning navigation elements with logo - Bootstrap 3

I'm using Bootstrap 3 to construct a responsive menu like so:
Logo Link 1 Link 2 Link 3 Link 4 (scales down to toggle in smaller devices)
The following does that, except when I choose to go with a larger logo image (440px by 140px) two problems occur 1) The navigation menu items rise to the top 2) In smaller devices, the logo doesn't seem to be responsive (doesn't scale down to fit screen)
Desktop view:
Mobile view:
My goals are 1) logo and links aligned vertically on the same line 2) logo scales down to smaller size to make room for navigation toggle
<div class='jumbotron grey-bg'>
<div class='container-fluid'>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
<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="#">My Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav-bar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class='active'><a href='#'>Link 2</a></li>
<li>Link 3</li>
<li><a href='#'>Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div><!--- end jumbotron -->
/* logo */
.navbar-brand {
width: 440px;
height: 140px;
background: url(img/logo.jpg) no-repeat;
text-indent: -999px;
padding: 0px;
margin: 0px;
}
/* end */
/* navigation */
.navbar-default {
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
color: #666;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover {
text-decoration: underline;
color: #666;
}
/* end */
img {
display: block;
height: auto;
max-width: 100%;
}
If you want the image to be responsive, don't make it a background image (include in html) and add the class "img-responsive":
<a class="navbar-brand" href="#"><img src="img/logo.jpg" class="img-responsive"></a>

Categories