Bootstrap navbar dropdown displaying menu-items horizontally - javascript

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 -->

Related

How to line up the bottoms of image and text in a bootstrap navbar?

I have a reasonably basic bootstrap navbar as seen in code below.
The pieces I care about here are the logo unified_brand.png and the Contact link. I would like to somehow line up the bottoms of the brand image and Contact text link.
Is it possible to do it programmatically? I've been messing pixels with the padding and margins and it did the trick but it feels like there should be a better answer?
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>
Small trick, works like charm, place an inline-block before the element you want to align with. For this to work, the parent tag must have a define height.
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
.small-trick{
width: 0 ;
height: 100%;
display: inline-block;
vertical-align: bottom;;
}
.navbar-header{
height: 37pt;
}
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: auto;
padding: 0;
vertical-align: bottom;
}
}
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="small-trick" ></div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>

Bootstrap nav-bar aligned center

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.

Bootstrap responsive - Textfield not receiving focus

I am using Bootstrap 3, my code is below. Shrink your browser to a small screen view. Click the Search icon, a search field will appear. I am trying to make this textfield receive focus, but I don't see it! $("#search_field").focus(); is not working. I think the problem is because the search button itself gets the focus, and I don't know how to give it to my textfield. Help!
HTML
<form>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span style="font-size:9px;">MENU</span><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<button id="test1" type="button" class="navbar-toggle btn-link btn-lg collapsed" data-toggle="collapse" data-target="#search_group" aria-expanded="false"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button>
<a class="navbar-brand" href="#"></a> </div>
<!-- end navbar-header -->
<div id="nav" class="navbar-collapse collapse">
<div id="navTop" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown site-toggle" > <span style="color:#eaab00;">Links</span> <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end nav -->
</div>
<!-- end container -->
</nav>
<div class="container">
<div class="row">
<div id="search_group" class="navbar-collapse collapse">
<div class="col-xs-12 input-group">
<input id="search_field" type="text" class="form-control" placeholder="Search the site..." />
<i class="glyphicon glyphicon-search form-control-feedback"></i> </div>
</div>
<!-- end col searchText -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</form>
JS
$(document).ready(function () {
$('#test1').on('click', function () {
//$('#test1').blur();
$("#search_field").focus();
})
});
CSS
/* Main styles */
body { margin-top: 125px; }
/* Main Nav */
nav {
background-color: #222222;
height: 50px;
}
nav .dropdown-menu {border: 1px solid #00b0ca;}
/* Small screen buttons */
nav button {
border: 0 !important;
border-radius: 0 !important;
}
nav button[aria-expanded="true"] {background-color: #00b0ca !important;}
nav button.btn-link {
padding-top: 12px;
}
nav button.navbar-toggle {
margin-top: 0;
margin-bottom: 0;
margin-left: 7px;
margin-right: 0;
width:50px;
height:50px;
}
nav button span { color: #fff; }
nav button span.icon-bar { background-color: #fff; }
nav .navbar-toggle .icon-bar {
width: 25px;
margin-left: 2px;
}
/* Breadcrumbs and Search */
#search_group {
background-color: transparent;
float:right;
width:25%;
}
#search_group>div { margin: 6px 0;}
/* Small screens - iPad portrait, Phones */
#media (max-width: 992px) {
body { margin-top: 50px; }
/* Breadcrumbs and Search */
#search_group {
background-color:#00b0ca;
float: none;
width: auto;
}
#search_group>div { margin: 10px 0;}
}
$(document).ready(function () {
$('#search_group').on('shown.bs.collapse', function () {
$("#search_field").focus();
})
});
https://jsfiddle.net/914sdezs/
Hope this is of help

Altering the state/position of a search form in a nav bar

I am trying to reposition a search form/button inside of my navbar with lingering problems. My CSS has changed many times, and I have gotten the form and button to move, but into weir alignment that either changes the nav bar or the search form. Here is my current CSS, which shows no changes from the default bootstrap state. I want to make the search form a little longer, and have the bar and form move slightly down and to the left, in position with the nav list:
<html>
<head>
<!-- Imported documents -->
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">
<meta charset="utf-8">
<title>TesterPage.</title>
</head>
<body>
<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 menuIcon" 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>
<!-- Brand Logo -->
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
</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">
About
</li>
<li class="dropdown">
Blog
</li>
<li class="dropdown">
Resume
</li>
<li class="dropdown">
Portfolio
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.container {
background:#30302f;
}
.container a{
color: #fff;
}
.container a:hover{
text-decoration: underline;
color: #fff;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
.navbar-default {
background-color: #30302f;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 14px;
top: 16px;
left: -50px;
text-transform: uppercase;
}
.navbar-form .navbar-right .form-class{
left: -30px;
top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
text-decoration: underline;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Many thanks!
EDIT: I still try and edit the CSS code, and it slides my nav header to the left on the index, and misaligns it in other working pages :/

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