Right now menu uses hover to toggle elements. How can I change hover to mauseclick?
<div id="nav-collapse" class="collapse out">
<ul class="nav">
<li class="logo" style="font-size: 25px;">WEBSITE-NAME</li>
<li>
<span data-toggle="collapse" data-target="#portfolio-collapse"></span>LINK #1
<ul id="portfolio-collapse" class="collapse out">
<li>SUB LINK #1</li>
<li>SUB LINK #2</li>
<li>SYB LINK #3</li>
</ul>
</li>
...
bootstrap.min.js code on my website (http://wklej.to/OrUbj/text).
Your question and issue is not clear. Please edit your question and include more details such as screenshot, fiddle links etc. However, according to Bootstrap Docs, the Navbar dropdown menu works for click event and the markups is as below:
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
If you are trying to get responsive menu, then your code would be similar to below:
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
Related
I am trying to design a responsive site using bootstrap 3 with brand name middle in nav bar. I want that two collapse bar in the two side of the nav bar. But I am facing problem. The left collapse bar is not adjusting with the logo it comes above the logo when I resize the window. Here is the image after implementing the code.
HTML code :
</header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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 navbar-brand-centered"> <img src="images/plogo.png">
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link</li>
<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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS Code :
#media screen and (min-width:650px) {
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 160px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
}
My main nav bar will be like this :
Can any one tell me how I customize nav like this ? I have plain html and css for my desired design but when I use them with bootstrap position changes like mentioned above.
I could now recreate the issue, the problem is that you have way too much content on your navbar.
If you want everything to be shown in the navbar you have to either scale down your image or adjust the container's width. That isn't too beautiful and may cause trouble if you use the container again.
But even if you do this, there are some cases (try to scale you window down a little more than mobile) in which the image still overlaps the Navbar Items!
If you want to create a responsive page, please code so the Site can adjust to any size, so you should allow the image to behave responsive and so scale down.
Simply add a #media rule to scale down the width of your navbar-brand and adjust it to center correctly by changing spacing rules like padding.
PS: I saw your Image isn't centered correctly, you should add a width to your navbar-brand and adjust the margin-left to half of the image's width.
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
I am trying to build my first api in Rails. And for that I want to use angular for front-end and ruby for back-end . I managed to get angular working but for some reason I can't get angular-material to work. I tried using this gem and followed the instructions written there.
The problem I am facing with it that frankly it doesn't work, nor do I get a meaningful error from the web console.
The project I am trying to make can be found here . I know it needs a lot of code refactoring and so on, I am just trying to configure things at the moment.
On the web page this is the only thing that get displayed :
Primary (md-noink)
Disabled
from this command:
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">{{title4}}</md-button>
<div class="label">Flat</div>
</section>
which makes me believe it doesn't work...
also this is a navbar that has to be green but is not:
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-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>
</div>
when you make your backend with the rails-api, a view is not created, so you don't have to worry about which angular gem to pick from. You can create another directory (and repository) for the client (your angular frontend) and generate the frontend there. Now all you have to worry about is getting data, whether JSON or XML, traveling between the API and your client.
You can find a step by step tutorial here.
Hope it works out!
I have been re-building a site with Bootstrap, but I know that many of the links will change as I build the site. It seems the best plan to use HTML templating to produce the links in the navbar.
However, I just can't get it to work at all. I am guessing there may be some issue with the collapsable navbar using javascript, and when each function runs. This is just a guess, I am a beginner.
This is the HTML - (the handlebars link is in the header)
<script id="some-template" type="text/x-handlebars-template">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
About<b class="caret"></b>
<ul class="dropdown-menu">
<li>Intention</li>
<li>Membership</li>
<li>Genealogy</li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
Writings<b class="caret"></b>
<ul class="dropdown-menu">
<li>Poetry</li>
<li>Articles</li>
<li>Lectures</li>
<li>Qur’anic Study</li>
<li>Sufi Stories</li>
<li>Thoughts</li>
<li>Book Reviews</li>
<li>Library</li>
</ul>
</li>
<li>Sharib Press</li>
<li>99 Names</li>
<li class="dropdown">
Persian Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Hafiz Shirazi</li>
<li>First Line index</li>
<li>Glossary</li>
</ul>
</li>
<li>Ajmer</li>
<li>Konya</li>
<li class="dropdown">
Images<b class="caret"></b>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Art Gallery</li>
<li>Sufi Shrines</li>
</ul>
</li>
</ul>
</nav>
</script>
</div>
<script type="text/javascript" src="script.js"></script>
This is the script file -
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
home : "/home.html",
etc.
};
$("#content-placeholder").html(template(data));
I copied this from a tutorial mostly, and the parent div has the correct ID.
Is it even possible to use templating in this case?
OK incase anyone stumbles across this having the same issue, there was only a small issue.
The fact that one of the data names in the script began with a number '99' (i didn't show this in my question as I assumend the data was fine). To solve this I simply put it in quotation marks.
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>