I have the following JSFiddle code
https://jsfiddle.net/mwcf086c/
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<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">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Profile
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
[Using Bootstrap and in mobile mode]
I would like that when the menu be expanded, it cover all the page.
See the following image.
Any idea on how to achieve this?
Thanks
Add height: 100vh !important; to your css in the .navbar-collapse.in, .navbar-collapse.collapsing class
.navbar-collapse.in, .navbar-collapse.collapsing {
clear: left;
}
.navbar-collapse.in {
height: 100vh !important;
}
Here is a fiddle: https://jsfiddle.net/L2fqzswk/1/
Related
I am using the bootstrap navbar-toggle and targeting the class navbar-collapsed but my navbar is not automatically closing on mobile:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<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 scrollTo" href="#intro"><img id="bg-img" src="./img/hn-logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Products
</li>
<li>Learn
</li>
<li>Lab Testing
</li>
<li>Partners
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Try this, add this Jquery in script tag
<script type="text/javascript">
$('.nav a').on('click', function () {
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click() //bootstrap 3.x
});
</script>
Include jquery through CDN or from your own source
jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and then include bootstrap js CDN
Bootstrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I am trying to make a collapsible navbar with Bootstrap but no matter how many times I try and how many times I check the way it's done I can't manage to make clicking the button expand the navbar.
This is my HTML:
<section id="upper-section">
<div class="container mini-container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-target="#nav" 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 href="index.html" class="navbar-brand">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<div id="nav" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Projects
</li>
<li>
Professors
</li>
<li>
Contact
</li>
<li>
Administration
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
And I made sure jquery is being loaded before bootstrap.js:
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.js"></script>
I don't know what's wrong, why pressing the button isn't expanding the navbar?
Edit: fiddle
It's missing the data-toggle on your button
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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>
I had the same problem here is what I did. I grabbed the 3 js cdn (jquery, popper.js & js) from the boostrap website here:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Put those links in the head section of the html. I have put the bootstrap css cdn below those ones.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Please follow the website link for the latest versions.
You need use a dropdown class in an li element, and a dropdown-menu in a ul element:
<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="#">Directorio MINSAL</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Exposiciones<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Exposiciones 1</li>
<li>Exposiciones 2</li>
</ul>
</li>
<li class="dropdown">
Asambleas<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Asambleas 1</li>
<li>Asambleas 2</li>
</ul>
<li>Estudiantes</li>
<li>Maestros</li>
<li>Formación pedágogica</li>
<li class="active">Item Activo</li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Cerrar Sesión</li>
</ul>
</div>
</div>
</div>
... And F12. It's very useful in these cases.
Recently, I also faced the same situation and I found that the targeted ID (i.e id="nav") had a space in its name...Just like below
<div id="nav " class="navbar-collapse collapse navbar-right">
So, after removing this extra white space it worked for me.
I know my answer is not related to the posted question...I wrote it if in case any reader may find it useful.
I am trying to implement search menu on navbar in following way.
There is two design, which is one fore screen < 767px and another one above 767px.
Basically, I am able to expand the search bar but the position of the expanded search bar is not display correctly.
$(function(){
$("#search-button, #search-icon").click(function(e){
e.preventDefault();
$("#search-button, #search-form").toggle();
});
})
#search-form { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1
</li>
<li>Menu 2
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form role="search">
<button id='search-button' class='btn btn-default '><span class='fa fa-search'></span></button>
<div id='search-form' class="form-group">
<div class="input-group">
<span id='search-icon' class="input-group-addon"><span class='fa fa-search'></span></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</li>
<li><i class="fa fa-user"></i>
</li>
<li>Log In <span class="sr-only">(current)</span>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
I would try this; it follows the bootstrap default for adding forms to the navbar, then you can adjust it for mobile viewports with CSS.
$(function() {
$("#search-button, #search-icon").click(function(e) {
e.preventDefault();
$("#search-button, #search-form").toggle();
});
});
#search-form {
display: none;
}
#media (max-width: 767px) {
.custom-navbar {
text-align: right;
}
.custom-navbar #search-button {
float: none;
border: none;
right: 0;
text-align: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<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" />
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1
</li>
<li>Menu 2
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i>
</li>
<li>Log In <span class="sr-only">(current)</span>
</li>
</ul>
<form class="navbar-form navbar-right custom-navbar" role="search">
<button id="search-button" class="btn btn-default"><span class="fa fa-search"></span>
</button>
<div id="search-form" class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search"><span id="search-icon" class="input-group-addon"><span class="fa fa-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>
This should be pretty simple. I am trying to change bootstraps theme from default to a dark theme with the following code and javascript:
<link rel="stylesheet" href="/static/bootstrap.min.css">
<script src="/static/jquery.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
<!-- Dynamic theme updates -->
<script>
var themes = {
"default": "",
"inverse" : "/static/darktheme.css"
}
function changeTheme(themeType) {
var themeurl = themes[themeType];
document.getElementById("mynavbar").className = "navbar navbar-" + themeType + " navbar-fixed-top";
var themeRef = document.getElementById("theme-ref")
themeRef.setAttribute("href", themeurl)
};
</script>
<link id="theme-ref" rel="stylesheet" href="">
And here is my navbar with the button to change it:
<div id="mynavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img style="max-width: 70px;" src="static/me-logo.png">
C&T Tool
</a>
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
an item here
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><another item</li>
<li class="dropdown">
Theme<b class="caret"></b>
<ul class="dropdown-menu">
<li>Light</li>
<li>Dark</li>
</ul>
</li>
{% block navsubmit %}
{% endblock %}
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
It works but I have to click it twice to get it to work fully. The first click on inverse changes the font and some margins and the second click on inverse changes the colors and everything else. What could make this happen? I'm using this theme.
I'm sure it's very simple but I'm pretty new at Bootstrap and even html/css.
I want my navbar to be after my header and fixed to the top when scrolling past it.
I got this working, BUT: the navbar becomes transparent and unclickable when scrolling and above my other content.
How do i overcome this?
Here's my .html:
`
<div id="nav" class="navbar navbar-default">
<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>
Your Company
</div>
<div class="collapse navbar-collapse" style>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Everyday
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
`
Here's my affix .css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
Here's my affix related js:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
Thank you!
Change the z-index of #nav to :
#nav{
z-index:9999;
}