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
Related
So it works on mobile view for two of the pages - My Profile and My Reservation. However, it does not close again when I click on the toggle on the main home page.
<nav class="navbar navbar-default navbar-top">
<div class="container" style="max-width: 1140px;">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" 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>
<div class="logo">
<a href="/Default.aspx" class="navbar-brand">
<img src="/images/logo.png" style="width: 85px; margin-top: 16px; float: left;">
</a>
</div>
<div class="logo_mobile" style="display: none;">
<a class="navbar-brand" href="#">
<img src="/images/logo.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-target=".navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><font>Home</font></li>
<%--<li><font>Services</font></li>--%>
<%--<li runat="server" id="btn_map"><font>Search</font></li>--%>
<li runat="server" id="btn_contactUs"><font>Contact Us</font></li>
<li runat="server" id="btn_myaccount"><font>My Profile</font></li>
<li runat="server" id="btn_myreservation"><font>My Reservation</font></li>
<li runat="server" id="btn_signup"><font>Sign Up</font></li>
<li runat="server" id="btn_login"><font>Log In</font></li>
<li runat="server" id="btn_signout"><font>Log Out</font></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</nav>
I'm not sure if it's the CSS issue though.
.navbar-header {
float: left;
}
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: auto;
}
.navbar-collapse .navbar-nav.navbar-left:first-child {
margin-left: -15px;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-collapse .navbar-text:last-child {
margin-right: 0;
}
I've even tried JQuery but it won't budge. I also looked at the source code for the main page that it's not working on, and I cannot seem to detect any problems there because I actually use an another page for the header/nav to apply for all the pages.
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;
}
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 -->
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 :/
how to reduce the white space between the navigation bar and the banner.....
i reduced the padding and margin but its not getting affected....
providing my code below.....
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
navbar .navbar-inner {
background: #fff;
color: #000;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
text-shadow: none;
padding: 20px 0 10px; <--- remove this
}
Put following CSS rules at the end of your css. I think it will fix your problem.
.home { padding-top: 47px !important; }
.home article.container { margin-top: 0px !important; }
.navbar { height: 47px !important; }
.navbar .brand { padding: 0 20px 10px !imporatnt; }
You are using bootstrap responsive, check your page in smaller browser width.
Bootstrap is creating collapsible menu which doesn't seems good with the current background!
Also I would recommend you to not make changes on bootstrap files, it will make it impossible to update your libraries. Instead you can overwrite them.