<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class = "container">
<div class="navbar" >
<div class ="navbar-header">
<!-- Place your logo here -->
<div class="navbar-brand" >
<img src="images/logo.png" alt="logo text">
</div>
</div>
<button type="button" class="navbar-toggle navbar-right " data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"><hr><hr><hr></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class=" collapse navbar-collapse nav-collapse ">
<ul class="nav navbar-nav navbar-right">
<!-- Add require site page navigation -->
<li> <i class="icon-globe"></i>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user"></i>About Us<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>The Company</li>
<li>Vision</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user" style="color:#000000"></i>Team<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Meet Our Team</li>
<li>Our Sister concerns</li>
</ul>
</li>
<li><i class="icon-pencil"></i>Projects</li>
Refer
Contact Us
Web
Locate
</ul>
</div>
</div>
</div>
check the problem at www.alaknandainfra.com/refer.php the nav bar collapses suddenly in mobile view . i spent many hours but can't find the mistake . and i want to align the toggle menu on the right side . when user click on toggle button the menu should come on the right side
If you remove the height:0 at bootstrap-responsive.min.css:1240, that issue seems to be fixed.
.nav-collapse,.nav-collapse.collapse{
/* height:0; */
overflow:hidden
}
Related
How to make this bootstrap 'Navbar' straight, I've tried using different navbar classes but couldn't get it straight, please help me out. Snapshot of the web-page given here web-page snapshot
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>>Bootstrap Practice</title>
</head>
<body>
<!-- Navbars -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
Coldplay
</div>
<ul class="nav navbar-nav">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
</div>
</nav>
</body>
</html>
The default behavior of navbar-nav is
flex-direction: column;
Set a class in the html
<ul class="nav navbar-nav navigation-bar-row">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
Then in your css:
.navigation-bar-row {
flex-direction: row;
}
If you're lazy like me, skip everything above and just do:
<ul class="nav navbar-nav" style="flex-direction: row;">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
Edit: The commenter below me has it right. The best thing to do is add "d-flex flew-row" to the ul class list.
The Bootstrap Navbar docs have a working example that you can copy and paste, substituting in your own values as needed.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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">Search</button>
</form>
</div>
</nav>
There are classes set in Bootstrap 4 that will shift the 'horizontal' nav to a vertical nav. Both being straight.
(function(){
var menuToggle = $('#menu-toggle');
menuToggle.click(function(){
menuToggle.next().toggleClass('d-sm-block');
menuToggle.next().toggleClass('d-none');
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-light">
<!-- PUT A BUTTON HERE THAT ON CLICK WILL SHOW HIDE THE NAV -->
<button id="menu-toggle" class="d-block d-md-none">Menu *burger icon*</button>
<ul class="navbar-nav d-none d-md-inline-flex">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>
You can put a button in there too, to toggle the nav. Again using Bootstrap classes.
I don't have too long so this is as far as I got.
I have the following template so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class='navbar-header'>
<button type='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>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href=""><img src="images/Evaluate_Pharma_Logo_220.png" /></a>
</div>
<div class="clear-fix"></div>
<div class="navbar-collapse collapse">
<ul class='nav navbar-nav'>
<li>
<a href="">
<input type="text" /><span class="fa fa-search big"> </span> SEARCH
</a>
</li>
<li>
<a href="">
<span class=""></span>BROWSE DATA
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
CREATE REPORT
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Company & Country Profiles</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
PEER GROUPS
<span class="caret"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
YOUR EVALUATION
<span class="caret"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
When I run this I obtain my menu as expected, but when I reduce the width of the page my navbar toggle button class appear to the right of navbar-brand. I need this to be to the left of this, how can I make that happen? This is just the shell, I know I need to fill in my hrefs and other stuff
bootstrap floats it right, so you would override it with:
.navbar-toggle {
float: left !important;
}
note: using "!important" is not best practice, so alternatively add a new id selector to the same button element as .navbar-toggle, and add the same property and value.
I have navbar and it have some menus in the anchor tag.
When I click the menu, it remains selected but when I click somewhere in the background then it loses that active class.
How to overcome this, please help
Below is the snippet of same
<!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-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>
I am using Bootstrap3 <nav>, in the sample code the team used navbar-toggle collapsed class to collapse the elements in navbar on small screen.
My question is how to change the order of them when collapsed?
I made a short snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.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">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</nav>
</body>
</html>
To clarify, in my <nav>, from left to right there are a list, an image, another list. When they are collapsed on small screen, the order will be from top to bottom, list, image and list. How to put the image at the top when collapsed?
The easiest way would be to create the brand html twice, and make one visible on xs and the other hidden on xs.
You can do this by adding the visible-xs and hidden-xs classes to the containers that you want to be either visible or hidden when the navbar is collapsed.
By doing this you can display the brand image in both places without having to add any JavaScript.
CodePen Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="dropdown">
<div class="navbar-header visible-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>LINK1</li>
<li>LINK2</li>
</ul>
</li>
</ul>
<div class="navbar-header hidden-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li class="dropdown">
Hi! User<span class="caret"></span>
<ul class="dropdown-menu">
<li> Profile</li>
<li> Feedback</li>
<li role="separator" class="divider"></li>
<li> Log Out</li>
</ul>
</li>
</ul>
</nav>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm making a site in Bootstrap and I wanted to make two navigation menus.. So I coded this:
<?php require_once 'php/functions/edu_functions.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Gooyanet</title>
<link href="styles.css" rel="stylesheet"/>
<style type="text/css">
</style>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/head.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body data-spy="scroll" data-target="#my-navbar">
<div id="wrapperDiv">
<div id="stickyNavigation">
<nav class="navbar navbar-default BHoma">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></li>
</ul>
<ul class="nav navbar-nav navbar-right BHoma">
<li>ورود به حساب کاربری</li>
<li>ایجاد حساب کاربری</li>
<li>همکاری به عنوان مترجم زبان</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="searhBox">
<div class="row">
<div class="col-lg-4">
<div class="logo">
<a href="#">
<img alt="Brand" src="img/logo.png" width="150" height="30">
</a>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
<div id="mainNavigation">
<nav class="navbar navbar-default">
<div class="container-fluid">
<nav class="navbar navbar-default">
<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" aria-expanded="false">
<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="#">Brand</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 <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
So if you run this on an html document which connects to Bootstrap styles ,you will notice that everything works fine except when you minimize the screen to see how the menu navigations works in mobile devices...
I mean when I hover over the button of menu navigation 1 it works correctly:
1
But when I hover over the button of menu navigation 2, again it shows me the top menu rather that main menu items:
2
I don't know why this thing happens ,I also tried replacing codes with default menu navigation but wasn't useful yet!
So if you have any idea on this ,please let me know... thx!
Both navs have data-target="#bs-example-navbar-collapse-1"
You need to change the id and data target on one of your menus.