This is what I have:
<div class="container" style="padding-top: 70px;">
<div id="navbar">
<!-- Fixed navbar -->
<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="/">
<div class="col-xs-2"><img src="img/favicon.png" alt="Dev Icon" height="20px" width="20px"></div><div class="col-xs-10">FrontEnd Dev</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<?php include('includes/navbar.php'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The <?php include('includes/navbar.php'); ?> just adds the <ul class="nav navbar-nav"> with the <li> tags from another array file.
This issue only happens when the toggle button is available on smaller devices. Clicking on the button does nothing visually (but it does change classes in the code). Clicking the button a few more times will result in the disappearing of the complete navbar. I removed any other css styling that could affect the navbar but is still the same. I use Bootstrap v3.3.7 using the CDN links from the Bootstrap website.
I found the problem. The toggle button has data-target="#navbar" which targets the <div id="navbar" class="navbar-collapse collapse">. I didn't realize that I had all the navbar wrapped up in a ´div´ with the id of navbar. So that's where the conflict was.
Related
I like to change the default ID name from id="navbar" to id="main-navbar"
From: <div id="navbar" class="navbar-collapse collapse">
To: <div id="main-navbar" class="navbar-collapse collapse">
If I change then the main nav/menu items doesn't expand/collapse when you check in small device. How can I manually enable this feature? Please help.
Here is bootstrap template that I am using: https://getbootstrap.com/examples/navbar/
There is this button in code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
So you change data-target="#navbar" to data-target="#main-navbar"
I am currently working on a Bootstrap-based website, and I wanted to change the opacity of my bootstrap navbar on scroll. I wanted the navbar to become full visible at a height of 500px.
So far so good, I changed the scroll opacity using the following code I found online:
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
My problem is that the navbar scroll opacity works on my website, but when I open my website in mobile view, the bootstrap-hamburger menu does not work.
When I press the button of the hamburger menu, the menu collapses and the hyperlinks are visible. The only problem is that I do not see a background behind those links. I tried editing this in my CSS, but setting an background there does not work, I think due to the scroll opacity script I implemented.
I am sorry for my crappy English, but I hope you understand my problem :)
Edit: Here's my navbar code:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
<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 topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
WORK
</li>
<li>
TEAM
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
I'am trying to have an alert at the top of my page with a form for my visitors to put in their phone number. It is simply a "alert alert-info" div with the form within it. So that works great because I put it at the top of my body tag. Then comes the nav, which right now is a "navbar navbar-default navbar-static-top" div. When I try to change that into a fixed-top (fixed below the alert) it just comes out on top of the alert (There might be a z-index issue, I don't know). Does anyone know how I can make the nav fixed at the top but below the alert (which should be static at the very top)?
Thanks alot in advance!
Thanks for your answers. Found the final answer my self (from another question here) using the bootstrap affix.
I put an id to the alert called "alert" and an id to the nav called "topnavbar". I then added the css:
#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
and the javascript:
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
From: Putting content/banner above the "Fixed Top Navbar"
This put the nav between the alert and jumbotron and the nav becomes sticky after the alert.
Per Bootstrap's documentation: "The fixed navbar will overlay your other content, unless you add padding to the top of the body."
If I get what you want to do, why not try something like this.
Just add another div container in .. but at the top of the navbar.
And just place you alert in this container.
Here is the Fiddle.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container col-lg-12 bg-primary"><br><br></div>
<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="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I'm currently building the website for my brand new creation and - since I've never been such a CSS guru - I need your lights!
There is a central screenshot (with the editor inside). When the window is at full size, the screenshot appears fine and centered as it's supposed to be. When I start reducing the width of the window, the image seems as if it's moving to the right. Would it be possible to keep it where it initially is, and resize it when the window resizes?
On resizing, the navbar menu collapses and a toggle button (mobile-style) is created in its place. Is there any way to disable this? Or, at least, not trigger at that stage but at a smaller width (while the navbar-brand is still fitting)?
That's the core HTML section:
<div 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="#bs-example-navbar-collapse-1" >
<span class="sr-only" style="color:black;">Toggle navigation</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/logo.png" width="40"> Peppermint</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><i class="fa fa-home"></i> Overview</li>
<li><i class="fa fa-question-circle"></i> Documentation</li>
<li><i class="fa fa-shopping-cart"></i> Buy</li>
<li><i class="fa fa-life-ring"></i> Support</li>
</ul>
</div>
</div>
</div>
<div id="header">
<div class="container" >
<div class="row-fluid" style="text-align:center;">
<img src="images/screenshot2.png" >
</div>
</div>
</div>
And here's the live page: http://www.osxpeppermint.com
Thanks a lot!
The image is larger than the containing div so it jumps outside. Simplest solution is to add the img-responsive to the image:
<img src="images/screenshot2.png" class="img-responsive">
If you want the nav bar to collapse at a different screen width, you will need a custom download of the Bootstrap library. Go to http://getbootstrap.com/customize/ and change the #grid-float-breakpoint value from it's default of #screen-sm-min to whatever width you require.
I have two problems with Bootstrap: I can't add ScrollSpy and smooth scroll at my Boostrap site.
<body data-spy="scroll" data-target="#test">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div id="test" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-collapse">
<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="#">L</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="test" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="">Chi Sono</li>
<li><a class="scroll" href="#Conoscenze">Conoscenze</a></li>
<li><a href="#OS" >Sistemi operativo</a></li>
</div><!-- /.navbar-collapse -->
</nav>
This is the navbar code. I've tried many solutions, but to no avail. How do I add this effect?
replace
<div id=test ...>
with
<nav id=test...>
add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component. Since you are using div when defining id of data-target for scrollspy, it won't work. use nav instead
http://getbootstrap.com/javascript/#scrollspy
And another error in this part of your code here
</div><!-- /.navbar-collapse -->
</nav>
do the navbar-collapse with nav tag not the div tag.
so the correct code is
</nav><!-- /.navbar-collapse -->
</nav>