Normally, I would just do position: relative and do left: 500px. But, the best part about Bootstrap is that it's responsive. I don't want to get rid of the responsive feature of Bootstrap. How do I center an li in Bootstrap inside of my nav?
Please view the snippet in Full Page mode. My goal is to move the two "Links" to the middle of the div. They are both li's. How do I accomplish this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Fancy navbar login / sign in form - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
padding:50px;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="#">Login dropdown</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="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<script type="text/javascript">
</script>
</body>
</html>
Just you can do it in this way--
Add a class .navbar-centre to the ul which contains the links to be centered.
Then add the css like the snippet.
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="#">Login dropdown</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 navbar-center">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Related
I already have a side menù, I want him to change into a hamburger menù whenever the website is open by a mobile device. I also use bootstrap libraries, I dunno if it can help, it would be better using them. Here's an example of what I have:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
div {
border: solid black 1px;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
.menu {
text-align: center;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
<div class="menu">
<button>Content 1</button><br>
<button>Content 2</button><br>
<button>Content 3</button><br>
<button>Content 4</button><br>
<button>Content 5</button><br>
<button>Content 6</button><br>
<button>Content 7</button><br>
<button>Content 8</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
Since you're using Bootstrap, it's easier to do it with Bootstrap like this:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="yourlogo.com" class="d-inline-block align-top" width="32" height="32" alt="Your logo" />web.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Expand navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation-bar-content">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link disabled" href="#">Products</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
When used on a phone, the navigation menu folds into a hamburger. You can verify this, for example, using the developer tools (CTRL + SHIFT + I in Chrome).
Of course, you need to have some sort of search function for that search field or it won't work for you. You can also add a dropdown there, but you must also have JavaScript linked.
I used toggle navbar as menu in my website for all devices. When I use this code it does not showing the 3 icon for collapsible nav bar. Please anyone find the errors in my code
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="srch">
<form method="post" class="col-md-7">
<input type="text" name="search" placeholder=" SEARCH" id="srch">
</form>
</div>
</div>
<div class="col-md-4">
<img src="image/logo.jpg" width="250" height="74">
</div>
<div class="col-md-4">
<button type="button" class="navbar-toggle x collapsed line" data-toggle="collapse" data-target="#navbar-collapse-x">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
You may try this bellow example according your requirement
.navbar-toggle {
border: none;
background: transparent !important;
&:hover {
background: transparent !important;
}
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<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 top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
for collapsible nav bar use this instead :
<!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.3.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-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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
change the screen size to see the effect.
https://jsfiddle.net/43rm9emw/
I made a navbar using bootstrap 4.
Now I want to add user avatar and name after sign in mentioned as circle. I have no idea how to do this. If you give or scratch it help me lot.
Now, my idea is when user sign in replace the navbar with a new navbar that have a place with avatar. Or replace the Sign in text with the avatar that is more complex to me. Second is need more css code I guess.
I load the navbar using following rule. Then there is a possibility to nav-placeholder when sign in button will be clicked.
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<div id="carousel">
</div>
<div id="successfulModal">
</div>
<script>
$(function(){
$("#nav-placeholder").load("newnavbar.html");
$("#carousel").load("carousel.php");
});
</script>
My navbar code
<html lang="en">
<head>
<title>Matir Dokan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.modal-backdrop
{
background: none;
}
</style>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Matir Dokan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle1" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Object Type
</a>
<div class="dropdown-menu menu1" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="toy">Toy</a>
<div class="dropdown-divider" ></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Furniture">Furniture</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Gift">Gift</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Household">Household</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Instrument">Instrument</a>
</div>
</li>
<script>
$(function(){
$(".menu1 a").click(function(){
$(".toggle1").text($(this).text());
});
});
</script>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
<script>
$(function(){
$(".menu2 a").click(function(){
$(".toggle2").text($(this).text());
});
});
</script>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<input class="form-control" type="hidden" id="object" value="">
<input class="form-control" type="hidden" id="material">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
</li>
<script type="text/javascript">
function add_form(name){
document.getElementById("object").value=name;
console.log(document.getElementById("object").value);
}
</script>
<li class="nav-item">
<a class="nav-link" href="#">Auction</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle3" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cart
</a>
<div class="dropdown-menu menu3" aria-labelledby="navbarDropdown3">
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park <span class="dropdown-product-details">2 x $24.89</span>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<a class="btn btn-sm btn-secondary" href="cart.html">View Cart</a>
<a class="btn btn-sm btn-success" href="checkout-address.html">Checkout</a>
</a>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>
<!-- Modal content-->
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<!--<label for="email" class="col-form-label">Email address:</label>-->
<input type="email" class="form-control" id="signUpEmail" name="email" placeholder="Email">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Password:</label>-->
<input type="password" class="form-control" id="signUpPassword" name="password" placeholder="Password" onchange="check_pass()">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Confirm Password:</label>-->
<input type="password" class="form-control" id="signUpConPassword" name="password" placeholder="Confirm Password" onchange="check_pass()">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="signUpSubmit" disabled="true" >Sign Up</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function check_pass()
{
//alert(document.getElementById('signUpPassword').value);
if (document.getElementById('signUpPassword').value ==
document.getElementById('signUpConPassword').value) {
document.getElementById('signUpSubmit').disabled = false;
}
else
{
document.getElementById('signUpSubmit').disabled = true;
}
}
$('#signUpSubmit').click(function()
{
$('#signUp').modal('toggle');
//alert("signup completed");
var email=document.getElementById('signUpEmail').value;
var password = document.getElementById('signUpPassword').value;
$.ajax({
url: 'signup.php',
type: 'POST',
data: {
email: email,
password: password
},
success: function() {
//alert('Email Sent');
}
});
});
</script>
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<!--<label for="email" class="col-form-label">Email address:</label>-->
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Password:</label>-->
<input type="password" class="form-control" id="pwd" name="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
put php function in navbar.
<?php
if ( isset($_SESSION['session name here']) ) { ?>
// here put navigation bar which you want to show after sig in.
<?php } else { ?>
// here put navigation bar which you want to show before sign in.
<?php } ?>
Now it sould work.
By default you can keep the avatr field hidden or display as none and on successful login you can unhide the avatar class
Something like this
if(result == "validUser"){
// If the user is valid add the class
$("#avatarImg").addClass("showAvatar");
$("#avatarImg").addClass("rounded-circle");
}
.showAvatar{display:block;}
I've added an expanding input field in my Bootstrap .navbar, that only shows once the search button has been clicked. Right now the expanded input field pushes the menu-items to the left. When positioning #search-form absolute, the input field breaks out of on the right side of the container.
How can I make the search-form overlap the menu-times to the left?
Example:
$(function() {
$("#search-button, #search-icon").click(function(e) {
e.preventDefault();
$("#search-button, #search-form").toggle();
});
});
#search-form {
display: none;
max-width: 300px;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
This
</li>
<li>
and
</li>
<li>
That
</li>
<li>
<a id="search-button" class="btn btn-link"><i class="glyphicon glyphicon-search"></i></a>
</li>
<li>
<div id="search-form" class="form-group has-feedback">
<div class="input-group">
<label class="control-label sr-only" for="search"></label>
<input type="text" class="form-control" id="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
Edit:
Added screenshot
This did the job:
.nav>li:last-child {
position: absolute;
right: 15px;
}
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div id="header" class=" container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img title="DropInn" src="logo/logo.png" width="137" height="45">
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<div class="search" style="">
<form id="search_form1" action="http://products.cogzidel.com/airbnb-clone/search" method="post" class="searchform_head">
<i class="fa fa-search heaericon"></i>
<input type="text" id="searchTextField" name="searchbox" class="searchbox" value="Where are you going?" onblur="if (this.value == ''){this.value = 'Where are you going?'; }" onfocus="if (this.value == 'Where are you going?') {this.value = ''; }" onKeyPress="return disableEnterKey(event)" placeholder="Where are you going?" />
<div id="map-canvas"></div>
<input type="hidden" id="lat" name="lat" value="">
<input type="hidden" id="lng" name="lng" value="">
<div class='advanced_search' id="advanced_search" style='display: none; position: absolute;
z-index: 2147483647; background:#FCFCFC; border: 1px solid #CCCCCC; padding: 10px; opacity: 1;width: 240px;top:37px;'>
<label class="checkin_search">
Check in
<div id="checkinWrapper" class="input-wrapper">
<input id="checkindate2" class="check_wrap checkin search-option ui-datepicker-target" type="text" placeholder="Check in" name="checkin" autocomplete="off" readonly>
</div>
</label>
<label class="checkout-detail_search">
Check out
<div id="checkoutWrapper" class="input-wrapper">
<input id="checkoutdate2" class="check_wrap checkout search-option ui-datepicker-target" type="text" placeholder="Check out" name="checkout" autocomplete="off" readonly>
</div>
</label>
<div class="clearfix"></div>
<p class="filter_header">Room type</p>
<!-- Search filter content is below this -->
<div class="clearfix"></div>
<ul class="search_filter_content">
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Entire home/apt" name="room_types1" id="room_type_0">
<label class="checkbox_list" for="room_type_0"> Entire home/apt</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Private room" name="room_types2" id="room_type_1">
<label class="checkbox_list" for="room_type_1"> Private room</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Shared room" name="room_types3" id="room_type_2">
<label class="checkbox_list" for="room_type_2">Shared room</label>
</li>
</ul>
<div class="clearfix"></div>
<!-- <button id="submit_location" class="btn_dash" style=" font-size: 12px;margin: 10px 0; padding: 5px 11px;" type="submit" value="Search" name="Submit" >-->
<!--<i class="fa fa-search submitloc"></i>-->
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
<button id="submit_location" class="btn_dash" type="submit" value="Search" name="Submit">
<i class="fa fa-search submitloc"></i>
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
Find A Place </button>
<label class="btn_dash" id="close_search">
Close </label>
</div>
</form>
</div>
</li>
</form>
</li>
<li id="subnavigation" class="dropdown browse-dropdown">
<a class="dropdown-toggle header_link" href="#" data-toggle="dropdown">Browse <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li><!-- <i class="icon-popular"> </i>--> <i class="fa fa-heart"></i> Popular</li>
<li><a class="friends" href="home/friends/index.html"><i class="icon-friends"> </i> Friends</a></li>
<li><a class="map-neigh" href="home/neighborhoods/index.html"><!--<i class="icon-neighborhoods"> </i> --> <i class="fa fa-map-marker"></i>Neighborhoods</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="rightsign sign1">Sign Up</li>
<li class="rightsign sign1">Sign In</li>
<li id='view_help' style='float:left;'>
<li id='view_help' class="dropdown browse-dropdown help_book">
<a class="dropdown-toggle view_help1" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li>How do i sign up?</li>
<li> Need help on this page?
</li>
</ul>
</li>
<li class="lisyourspace"> <a class="btn yellow" href="rooms/new.html"><span>List Your Space</span></a> </li>
<!--<li class="listyourspace_menu"> <a class="yellow btn" href="http://products.cogzidel.com/airbnb-clone/rooms/new"><span>List Your Space</span></a> </li>-->
</nav>
</div>
</header>
I need CSS code for this display exact like Airbnb home page. Somebody please help to get this. I tried so many times, but failed to design that properly. How to do the full width grid system and how to code the CSS files?
First, you should try to add your background elements. Then, use basic css to make it fit the whole page width with repeat or not (depending on your background image)
Then, about the "full width grid system", bootstrap has many classes that fit your requirements like 'col-lg-** col-md-** col-sm-** col-xs-**', you should have a look at this :
http://getbootstrap.com/css/#grid
Your code is just a bit too generic. But this "bootply" is a good starting point for you :
http://www.bootply.com/b1SPDA3GOn
Hope it helps!