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.
Related
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've been given a web site to modify, which was built using Bootstrap v3.3.7. It includes a navbar (HTML below) which looks fine. However, I need to add a dropdown item to the navbar, which I did following the instructions on the Bootstrap page. The HTML is basically the same as I've used elsewhere without problems.
However, when I click on the dropdown in this case, the menu is cut off...
You can just see the top of the first item in the menu, but nothing more.
Anyone able to explain why this is happening? Here is the HTML for the navbar...
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="site-title">
<h3>My web site</h3>
</div>
</div>
<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="col-md-8 col-sm-8 navbar-style">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="dropdown">
Colours <b class="caret"></b>
<ul class="dropdown-menu">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I can't comment yet so I'll put my comment here with suggestion
neophyte shows that the code is working fine.. check your css style if you have overflow: hidden or something on your header
I'm not sure if the black background is part of your edit with menu cut off here if not, then your header has overflow
show us your css style too
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="site-title">
<h3>My web site</h3>
</div>
</div>
<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="col-md-8 col-sm-8 navbar-style">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="dropdown">
Colours <b class="caret"></b>
<ul class="dropdown-menu">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
For me it works fine . check out above snippet. I think it's a cdn problem. you might have included it twice in your page.
I have implemented a piece of code. When the browser window decrease in size (width-ways) the menu tabs enter into a clickable Hamburger glyphicon.
I would like to maintain this feature, but add one navigation tab outside the glyphicon when the browser reduces in size.
How is this possible using bootstrap? I attempted to add another
<div class="navbar"> <ul class="nav navbar-nav"> <li> </li> </ul> </div>
prior to the one ID'd "mainNavBar" however this led to poor formatting, which I thought might be able to be fixed by floating the two divs next to each other, but I couldn't work out the code to do that.
Below is my code.
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>
Markets
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li> About Us
</li>
<li> News
</li>
<li> Analysis
</li>
<li> Random Article
</li>
<li> Contact Us
</li>
</div>
</nav>
<!-- End Navigation Bar -->
</body>
</html>
Bootply: http://www.bootply.com/Vky1AGlU5F
CSS:
.still_on_view{
float: right;
}
HTML:
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>
<ul class="still_on_view nav navbar-nav">
<li> About Usb2
</ul>
Markets
</div>
<div>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li> About Us
</li>
<li> News
</li>
<li> Analysis
</li>
<li> Random Article
</li>
<li> Contact Us
</li>
</div>
</nav>
<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
}
The navbar worked properly once but i made some changes and it no longer works. When I make the window small the toggle square shows up but when i click on it - nothing happens.
Note: The navbar works fine in full screen - its just in small windows, when I click on the toggle button - the drop down menu doesn't appear
Was wondering if anyone knew how to fix it.
Here is my code for the header :
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">CHRONOS LOGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Google+</li>
<li class="divider"></li>
<li>Facebook</li>
<li class="divider"></li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
FOOTER:
<button type="submit" name="submit" id="submit"
class="btn btn-primary btn-lg">
Submit
</button>
</form>
</div>
<?php } ?>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="regform/js/jquery.validate.js"></script>
<script src="regform/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function() {
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
You have the wrong value on the data-target attribute; it should instead be:
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>
http://jsfiddle.net/fZTgH/1/
This is most likely a js problem as the code looks fine. Make sure that you have the bootstrap.min.js file in the header or at the bottom of the js header stack (under all the other js files).
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
For a further inspection, please update your question with the header code or a link to the site