Here is the html of my document, I want to show fixed right side search bar on screen below 991px but did not able to get proper code. Below is the detailed code and link.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" href="#">CompAny</a>
<a class="navbar-brand visible-xs" href="#">C</a>
<form class="navbar-form pull-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Browse Courses</li>
<li>Active Courses</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the css
#media(max-width:767px) {
.navbar .navbar-form {
width: 185px;
padding-left:0;
padding-right:0;
}
}
#media(min-width:768px) {
.navbar .navbar-form {
width: 250px;
}
}
.navbar .navbar-form {
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Reference link of the functionality i want to achieve http://jsfiddle.net/KSCvB/10/.Any help regarding this will be appreciate able.
Related
i have this navbar code:
<nav class="navbar navbar-inverse navbar-fixed-top navTop">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul id="otis">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right navSelected" id="topNav">
<li > HOME</li>
<li> ABOUT</li>
<li> SERVICES</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div></nav>
so all i want is when i click on contact in the menu to open a new div on the right and move the whole body to move to left and show the new div
the new div have this code:
<div id="contactUs" class="contactus">
<div class="contactUs text-center">
</div>
<div class="text-center">
Contact Us
<div class="col-md-12">
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div></div>
i put this in css:
#contactUs{
background-color: black;
height: 100vh;
display: none;
width: 25vw;
float: right;
}
and this is the script:
<script type="text/javascript">
$('#contact').click(function(){
$('#contactUs').toggle();
});
</script>
the new div is showing but the body is not moving any help? thank you in advance
$('#contact').click(function(){
$('#contactUs').toggle();
$('body').toggleClass('slideLeft');
});
body {
position: relative;
left: 0;
transition: 0.3s;
}
body.slideLeft {
left:-25vw;
}
Here's some example code using CSS transform to give you an idea.
$(function() {
$('#contact').on('click', function() {
$('body').addClass('show-contact-panel');
});
// ADD YOUR OWN CLOSE LOGIC
$('.content').on('click', function() {
$('body').removeClass('show-contact-panel');
});
});
body {
overflow-x: hidden;
position: relative;
transition: 0.3s all;
}
.content {
height: 500px;
background: #ff0;
}
.contact-panel {
height: 500px;
width: 300px;
background: #f00;
position: absolute;
right: 0;
top: 0;
transform: translateX(300px);
}
body.show-contact-panel {
transform: translateX(-300px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="navigation">
contact
</div>
<div class="content"></div>
<div class="contact-panel"></div>
</body>
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>
I dont know why is this not working ? I am trying to make a drop down menu and when I hovering over in the page it work but if i hovered in the linke it dosn't work In short, this drop-down list does the opposite
i need fix or a better way for this drop down menu
enter image description here
enter image description here
Html
<body>
<div class="wrap">
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
Css
.navbar-R-C:hover {
color: white !important;
}
.content {
color: White !important;
}
.dropdown-menu {
min-width: 250px;
max-width: 250px;
text-align: center;
background-color: #3E606F;
margin-top: -6px !important;
color: white !important;
border-radius: 15px !important;
}
.dropdown-menu > li > a:hover {
text-align: center;
background-color: #EC407A;
font-weight: bold;
margin-left: 7px !important;
margin-right: 7px !important;
display: inline-block;
color: White;
border-radius: 10px !important;
}
.dropdown-menu:after {
position: absolute;
margin-left: 210px;
top: -6px;
left: -30px;
border-right: 10px solid transparent;
border-bottom: 10px solid #3E606F;
border-left: 10px solid transparent;
content: '';
}
.dropdown:hover .dropdown-menu {
display: block;
}
JS
$(document).ready(function() {
$('.wrap nav ul li').hover(function() {
// Toggles slide but stops if not hover anymore
$(this).find('ul').stop().slideToggle();
// Toggles on and of the active class (triangle)
$(this).find('div').toggleClass('active');
}
);
}
);
Use this. it contains your code but some css are override by bootstrap css so you have to override bootstrap css to look like what you want. and the new thing is bootstrap.css, bootstrap.js and jquery.js dont forget to include these file here it loads directly from web you can download and link these file for offline use.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>
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
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.