I've been having trouble getting my bootstrap toggle button to display menu items 'What We Do', 'About', or 'Contact' when clicked. It collapses properly but will not work when clicked.
I've played around with as many things as I know how to fix it, but cannot figure it out.
<!--Logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ACS</a>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">What We Do</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
</div>
The menu is not correctly linked to the button in your code. What is appearing as ACS is the link, however this link is not targeted at the menu, the button is.
I have included a snippet. You only need some minor changes to make it work.
(btw, I only noticed now, it uses bootstrap 3.36 - I created the snippet using jsbin originally using 'Bootstrap latest' library!)
.navbar-header button {
color: #337ab7;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-brand" data-toggle="collapse" data-target="#mainNavBar">ACS
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div id="mainNavBar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">What We Do</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
</div>
You should always ensure that, when adding your script files or cdn, you put the jquery.js file or cdn link before the bootstrap.js file or cdn link.
You can read more on it on the official website of bootstrap: https://getbootstrap.com/docs/4.2/getting-started/introduction/
Related
i am new in bootstrap and having some difficulty in navbar (mobile view). i have added a navbar and added a toggle button, but it doesn't seems to be working perfectly. i am following the steps as told in tutorials and examples but still don't get the result right. navbar is toggling but when i click the toggle button, it toggles in and off simultaneously. also the toggle button is visible even on larger screen.
here's my code
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-menu" class="collapse navbar-collapse">
<nav id="nav-area">
<ul class="nav-bar-list">
<li>
<a>About</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>Tools</a>
</li>
<li>
<a>Services</a>
</li>
<li class="contact-button">
<a>Contact</a>
</li>
</ul>
</nav>
</div>
please tell me where i am doing it wrong? i am using bootstrap version 4.0
It works fine when I copied your code to this snippet. Are you sure you included the bootstrap js & css files along with jquery in your code? If so, then something else that you haven't posted must be interfering.
You need to add your own css to hide it on a larger screen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-menu" class="collapse navbar-collapse">
<nav id="nav-area">
<ul class="nav-bar-list">
<li>
<a>About</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>Tools</a>
</li>
<li>
<a>Services</a>
</li>
<li class="contact-button">
<a>Contact</a>
</li>
</ul>
</nav>
</div>
Need help to resolve the bootstrap dropdown navigation issue. I followed all the rules available but I am missing something. Please help.
The service tab has two drop down li which should open when click on the caret. But the website css is not allowing to do so.
<!-- navbar-header -->
<div class="header-nav">
<nav class="navbar navbar-default">
<div class="navbar-header logo">
<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>
<h1>
<a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>SEO Service</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Projects</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
<div class="contact-bnr-w3-agile">
<ul>
<!--<li><i class="fa fa-envelope" aria-hidden="true"></i>info#example.com</li>-->
<li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
<div class="clearfix"> </div>
</div>
You have a typo in your code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Here, data-target represents the div that is being targeted for toggling when you click the button. So, it is looking for the div with the ID "bs-example-navbar-collapse-1". This line is fine, though I'd recommend renaming it to something more useful, like "site-nav" or something.
Now, here is where the problem occurs:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
This is the div that you are (correctly) trying to expand/collapse. But you have given it the id "bs-example-navbar-collapse-1 navis", which is not the same as "bs-example-navbar-collapse-1". So, you are clicking the button, but no div is being found with a matching ID.
To solve this, set the ID to "bs-example-navbar-collapse-1" instead (remove "navis"):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Now, all should be right in the world.
Also, far as the jQuery warnings mentioned above, it seems you are loading jQuery 2 already, so you don't need to include 1.12 as well. So make sure you are including the jQuery lib that you want.
The button to toggle the nav bar won't function. I've checked through the answers to similar questions and can't see anything wrong with my html. Help much appreciated!
I can see all the li items in my navbar but cannot hide them.
Here's the relevant html:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="home">Simmo Simpson</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav">
<li>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
</ul>
</div>
<div id="#myNavbar" class="collapse navbar-collapse" >
<ul class="nav navbar-nav pull-left">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active"><a href="#contact" >Contact</a></li>
</ul>
</div>
</div>
</nav>
I've also included this at the bottom (and stylesheets etc in the meta section):
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
First off, add type="text/javascript" to the script tags for jquery/javascript includes.
Thirdly, check your server/site/browser configuration in terms of 'cross-site scripting'. I believe this may be your issue here. When you call a script with cross-origin, you are trying to execute the script remotely and for security purposes this tends to be disabled by default for a lot of web sites and/or servers. To get around this, I would recommend downloading the bootstrap CSS/JS files and referencing them from your sites director as apposed to a CDN.
I also see that you had an issue where by you included a '#' in an element id;
<div id="#myNavbar" class="collapse navbar-collapse" > - Upon fixing this the code stopped working, this is because you may not have changed the target ID of the bootstrap toggle button, see; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">.
In both of these lines the ID's need to match, that being the ID of the navbar element to be toggled, and the button that does the toggling.
Beginner project - I'm working on something with Bootstrap and have mostly finished building my Navbar. When the Navbar goes into collapsed mode I like the dropdown menu a lot and I want to have it this way at all times.
I cant for the life of me figure out what is even making it change to begin with
The left one is how it looks when it is collapsed, and how I wish to have it at all times (notice how it automatically centers the dropdown here as well):
http://imgur.com/a/yFVaE
I found that if I tweaked the CSS so that the page is always in collapsed mode, the dropdown still has the 2 styles and changes where collapsed mode used to kick in
Apologies - beginner here, new to StackOver flow as well, hope this makes sense to someone :) cheers
<nav class="navbar-fixed-top 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 cornerlogo" href="/">
<img class="logo" alt="Brand" src="/img/Logo1.png">
</a>
<!--<p class="navbar-brand centerme">Current Client Name</p>-->
<ul class="nav navbar-nav navbar-default centerme">
<li class="dropdown">
Current Client Name <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right scrollable-menu">
<li class="newclient">New Client</li>
<li role="separator" class="divider"></li>
<li>client1</li>
<li>client2</li>
<li>client3</li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--******************php if statement here to check if client selected-->
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default">New SABR</button>
<button type="submit" class="btn btn-default">Edit Client</button>
<!--</form>-->
<!--<form class="navbar-form navbar-right">-->
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I dont know how to properly show my css, but not sure its relevant as even if i disable ALL CSS on the page the behavior is the same
I'm having trouble with lining up the connections and sign out sections on my navbar toggle. As you can see, the last two are out of line with the others. I am using the bootstrap 3 site as a reference, but I'm sure I have something not marked right.
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Dash</li>
<li>Edit Profile</li>
<li>Invite</li>
<li>Record A Message</li>
<li>
<p class="navbar-text">Connections <span class="badge">0</span></p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p>
</li>
</ul>
</div>
<!-- /.navbar -->
</nav>
Thank you
I have tried a few different ways and the only solution I found without breaking the "mobile-first" approach was overriding the "navbar-text" class with a margin-left: 15px which also appears on the #media (min-width: 768px) line 4695.
.navbar-text {
margin-left: 15px;
}
I hope it helps ;)
trying removing the paragraph tags