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.
Related
I'm trying to setup navigation but I can't get it to work the way I wanted.
How i can customize my navigation wp-bootstrap-navwalkercustomize
my current static code.
<div class="nav-outer clearfix d-flex align-items-center">
<!-- Main Menu -->
<nav class="main-menu navbar-expand-lg">
<div class="navbar-header">
<div class="mobile-logo py-15">
<a href="index.html">
<img src="assets/images/logos/logo.png" alt="Logo" title="Logo">
</a>
</div>
<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>
</div>
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li class="current dropdown">Home
<ul>
<li class="dropdown">MultiPage
<ul>
<li>Page</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
<!-- Main Menu End-->>```
I am currently in a situation where I have a header like so
<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button 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>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
So it is essentially an empty header with nothing displayed. Instead, for larger screens, the main navigation is actually displayed in the footer
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2/a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
At the moment, when I go down to mobile size, it displays the mobile nav button in the header as it should do. However, when you click on it, it expands the menu in the footer. Is there any way I can put the menu I am using in the footer to display in the header when on mobile size?
Thanks
If you don't mind duplicating the footer html in the header you can do the following (I have a visible header Nav bar in the demo, but I assume you will tweak that):
<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" href="#">Brand</a>
</div>
<div class="container hidden-after-768">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
<footer class="footer container hidden-before-767">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">>Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
With the CSS:
#media (min-width: 768px)
{
.hidden-after-768
{
display: none;
}
}
#media (max-width: 767px)
{
.hidden-before-767
{
display: none;
}
}
Here's a demo: http://www.bootply.com/render/4NgDES9hYq
(editable version http://www.bootply.com/4NgDES9hYq)
Note that theoretically you should just be able to do <footer class="hidden-xs hidden-sm">, and <div class="hidden-md hidden-lg"> for the header section, but I found there was a point between around 768 and 994 pixels where it showed neither the footer menu nor the hamburger button, so we were left with a dead spot with no navigation links whatsoever. That is why I created the extra #media classes.
you can do this:
<header id="header_wrapper">
<div class="container2">
<div class="header_box">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</spaenter code heren>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="main-nav" class="collapse navbar-collapse navStyle">
<ul class="nav navbar-nav" id="mainNav">
<li>></li>
<li></li>
<li></li>
<li>Logout</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
$(document).ready(function(){
if($(window).width() <= 375){
$('#navbar2').html($('#navbar').html())
$('#navbar').html('')
}
else
{
if($('#navbar2').length>1){
$('#navbar').html($('#navbar2').html())
$('#navbar2').html('')
}
}});
<!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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar2" 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>
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar2"></div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
You can use a jquery script to move the footer menu to the header menu in mobile view.
I created a temp div in header and adding the footer menu to that div and assigning the toggle menu to that div
You can do this purely with bootstrap 'hidden-X' classes:
https://getbootstrap.com/css/#responsive-utilities
I have made a codepen with an example of a duplicated menu that hides depending on the classes you give it:
https://codepen.io/c0un7z3r0/pen/NjrPvR
The magic works as follows:
Top menu container:
<div class="navbar navbar-inverse navbar-fixed-top hidden-lg" role="navigation">
Bottom menu container:
<div class="navbar navbar-inverse navbar-fixed-bottom hidden-md hidden-sm hidden-xs" role="navigation">
note the hidden-X classes, these determine what circumstances each menu should be shown. I hope this helps!
You could also display your navigation with position: absolute or position: fixed. Just as a quick example :
.navigation {
position: absolute; // in your header
top: 0;
left: 0;
#media screen and (min-width: 40em) {
position: static; // in your footer
}
}
I am trying to put a div above navbar-fixed-top in bootstrap, but for some reason the div with its content does not show. I dont know what else to write here, it is asking for detail all is in a code
here is the code
<div class="nav-top">
<div class="container">
<div class="row">
<div class="col-xs-12">fdjfdl;ffd;fjd; fjd;ffffffffffffffffffff
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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>
<div class="navbar-brand" ><img src="images/logoa.png" alt="need to name it"></div>
</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-right">
<li class="active">Главная <span class="sr-only">(current)</span></li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
<li class="j">
Обо мне <span class="caret"></span>
<ul class="dropdown-menu">
<li>blu</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
remove your navbar-fixed-top class from code then you get some space to show your text.Have fun
Here is JSFiddle:https://jsfiddle.net/arifkarim/uu0n4cyk/3/
I know this is 4 years late but for anyone else stumbling upon this.
The fixed-top has a z-index of 1030, so just set your own element that you wish to be on top to z-index: 1050 (higher than 1030 at least).
I am trying to implement twitter bootstrap collapsible navigation bar. On Desktop navigation bar is visible but on mobile screen it's not visible.
Here is View Part
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>
<li ><a th:href="#{/X}" href="#">X</a></li>
<li><a th:href="#{/Y}" href="#">Y</a></li>
<li><a th:href="#{/Z}" href="#">Z</a></li>
<li><a th:href="#{/T}" href="#">C</a></li>
<li class="active"><a th:href="#" href="#">Blog</a></li>
<!--li>Help</li-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Can some one help me to fix this issue. I have included collapse.js in my path.
You're missing the navbar class which is the first line of the default navigation in Bootstrap. See Docs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>
<nav class="navbar navbar-default">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>
</li>
<li><a th:href="#{/X}" href="#">X</a>
</li>
<li><a th:href="#{/Y}" href="#">Y</a>
</li>
<li><a th:href="#{/Z}" href="#">Z</a>
</li>
<li><a th:href="#{/T}" href="#">C</a>
</li>
<li class="active"><a th:href="#" href="#">Blog</a>
</li>
<!--li>Help</li-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
I have got a problem with rows which are overlapping in this following code:
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar navbar-fixed-top ">
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
Site.com
</a>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
<li>SP</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="row">
<div class="col-md-6"><h1>This is my header</h1></div>
<div class="col-md-6"><img src="img/MyPicture.JPG" height="300"></div>
</div>
In my browser the last rows lies over the navbar. Could it be that it has got something to do with the second row being outside the container? If so where should I define the container.
Here is the jsfiddle text: http://jsfiddle.net/L9GJE/
Wrap <div class="row"> with a <div class="container">
e.g.
<div class="container">
<div class="row">
....
</div>
</div>
So whenever you use the navbar you'll need to keep in mind that it is fixed and you will need to add margin or padding from the top so your rows won't overlap.
Your navbar is fixed, so, you need to add margin-top to second row.
Your navbar was not made correctly, here is the correct usage of the navbar class:
<nav class="navbar navbar-default" 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" 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>
<!-- 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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>This is my header</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>