try to start learning about Bootstrap. i create little code to create responsive menu, like this
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<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>
Application Name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="JS/bootstrap.js"></script>
</body>
</html>
my question is, why when i try to select menu in small browser, menu does not show ?
can some one tell me why?
thanks
My geuss is that you didn't load jQuery. Place this in your header and see if it works:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Also i suggest to load the bootstrap js file also in the header, just after the jQuery library.
It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js
Not sure if this helps but I noticed that on the bootstrap site its tells you to link js files in the footer.
I also had wordpress place them in my header as i had to enqueue the scripts in my functions.php file. Once i removed the link to the jquery.js file and bootstrap-min.js in the footer the nav button began to collapse correctly.
Related
I'm using bootstrap stylesheets.
The following code is for my navigation panel. This works fine on my desktop browser but when I reduce the browser size or test on a mobile device, the burger menu appears but does not expand to display the contents of the navigation as expected.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<body>
<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 color-me" href="#home">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
Am I missing something in my HTML? I don't understand where the problem is!
please include this line and will work .
Note: Include in this order - include Jquery before Bootstrap.Bootstrap need Jquery to be loaded before Bootstrap.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
you are missing the javascript library so that the event isnot responded ,
Seem that you missed include bootstrap js file. Please check https://getbootstrap.com/docs/3.3/getting-started/
I guess using the bootstrap.min.js for the issues won't solve the problem until and unless you do not include the jquery in bootstrap#3
please also include the following link or get it through dist folder of javascript
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
I've been searching the boards here and nothing seems to cover what could be wrong. My navbar is all well and good but no hamburger or menu shows up when I go mobile. I've tried changing combinations and implementing different collapse names, but to no avail. Any ideas? Here's my code:
<header class="navbar navbar-custom" role="banner">
<div class="container">
<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>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pages">
<li class="page">item1</li>
<li class="page">item2</li>
<li class="page">item3</li>
<li class="page hidden-xs"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></li>
<li class="page">item4</li>
<li class="page">item5</li>
<li class="page">item6</li>
</ul>
</div>
</div>
</header>
Check if you have the meta tag in your head section
<meta name="viewport" content="width=device-width, initial-scale=1">
Also your Nav tag is not closing after the ul element. Check your tag closures
I think the </div> after the </ul> has to be replaced
In the original code, there's a div that closes the nav. That happened when I formatted for this site. In the original, it is closed by a nav tag. I forgot to include the header sets. Here they are:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">
<script src="https://use.fontawesome.com/8633c13aa3.js"></script>
</head>
you should check the horizontal scroll when u minimize the screen.that is one of the reason when your content in not fully responsive and when u minimize the screen the scroll appears horizontally and the hamburger icon not appear...
first of all remove all content expect the navigation on your page and then minimize the screen .and if problem still appers then you sould also check that your background color and color are change or not..
This question already has answers here:
twitter bootstrap navbar fixed top overlapping site
(19 answers)
Closed 6 years ago.
Can anybody tell me why I can not see the text under my navbar. Is it hiding it? I have set the navbar as fixed. Is this the issue?
I am trying to add a header underneath but I can't even see the text.
Thanks in advance
Reece
<!DOCTYPE html>
<html>
<head>
<!-- LINKS TO EXTERNAL FILES (BELOW) -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slyderesp.css">
<title></title>
</head>
<body>
<!-- NAVBAR (RESPONSIVE) -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Slyde</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Meet The Band</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--HEADER (RESPONSIVE)-->
<div>WHY CANT I SEE THIS?</div>
<!--LINK TO EXTERNAL FILES (BELOW) -->
<script type="text/javaScript" src="js/slyderesp.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Your navbar has the class .navbar-fixed-top which makes it fixed in the browser window. Your <div> is just below it. Remove that class or add some padding to your body.
I am trying to have a bootstrap navigation like this one
But this is in a ROR application and it keeps stacking no matter what I do.
So I decided to create a simple HTML file to see what I'm missing here.
This is the code:
<!DOCTYPE html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</body>
</html>
But if you copy and paste that code, all you'll see is everything stacking instead of being a horizontal menu like in the link above.
What ON EARTH am I doing wrong here?!?!??!?!?!
EDIT
The navigation above is totally ripped off from bootstrap page as linked above.
You're using the Bootstrap 2.3.2 docs but including the 3.3.4 files and then you're trying to make a 2.3.2 navbar (which does not work).
Using Bootstrap 3.3.4 docs, your navbar code should look like this:
<nav class="navbar navbar-default">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>
Otherwise, if you were intending to use the 2.3.2 docs you need to fix your 3 included files...
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
You are using bootstrap 3.3.4 but referring to the docs of bootstrap 2.3.2. This is the updated documentation
i created with bootstrap an "easy" navigationbar. Now the navigationbar overlay the text. I tried to give the .navbar a margin-bottom of 50px, with no result. Here is the Page and here the code:
<!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">
<title>Seite</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/meine.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Startpage4you</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Anmelden</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2">.col-md-4</div>
<div class="col-md-8">.ccol-md-8</div>
<div class="col-md-2">.col-md-4</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
my stylesheet
.navbar{
margin-bottom: 50px;
}
Because your navigation bar has a fixed property, everything else will appear underneath it, and pushed up to the top of the page.
So you just need to add margin-top:51px to your div 'row', in order for it to be seen.
What I would do though, is put the div class row inside a container, and then apply the margin-top to the container. Then you can use that for subsequent pages.
Since you are using a fixed navbar, you need to add padding to your body just like the bootstrap docs say:
body {
padding-top: 70px;
}
http://getbootstrap.com/components/#navbar-fixed-top