I'm trying to do something very simple with bootstrap, I need to implement this navbar.
I know it's simple, but I tried to implement it with pure bootstrap classes.
This is the closest that I got (but I can't make the navbar background to blue):
<ul class="nav nav-pills">
<li class="active"><a ng-href="#">Customers</a></li>
<li><a ng-href="#/about">Orders</a></li>
<li><a ng-href="#">About</a></li>
</ul>
It is possible to implement it only with bootstrap classes?
It's possible, but it's kind of hacking the intended use of CSS classes...
<div class="bg-primary well-sm">
<ul class="nav nav-pills">
<li><a ng-href="#" class="btn-primary">Customers</a></li>
<li><a ng-href="#" class="btn-default">Orders</a></li>
<li><a ng-href="#" class="btn-primary">About</a></li>
</ul>
</div>
Demo: http://bootply.com/evEpR2C7DV
Related
I am trying to implement a main menu (including sub menu) for a website using the BEM CSS naming convention. I have found myself nesting elements which I think is an antipattern of the convention?
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group__list">
<li class="nav__group__item">
<a class="nav__group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
It's always though to nest deep. You can not have Element of Element in the BEM methodology. So this nav__group__list is not correct, could be nav__group-list for example.
The correct BEM markup could look something like this.
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group-list">
<li class="nav__group-item">
<a class="nav__group-link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
However you can separate the "Group list", especially if it can be reused elsewhere in your project.
Your menu with separated links-group Block would look something like this:
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="links-group">
<h3 class="links-group__heading">Nav group</h3>
<ul class="links-group__list">
<li class="links-group__item">
<a class="links-group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
I've been there and I know what you're trying to do - avoid styling by nesting for every price. Believe me it's not the way. Try to keep it simple, don't be afraid of making elements intended to be nested inside the other but don't use second-level nesting in your naming to avoid "really__long__class__names" and renaming everything in case you want to change the HTML structure. Think of BEM as a method of isolating components, breaking a complex UI into simple chunks easy to understand and maintain. In you specific case I'd probably go with something like this:
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav--submenu">
<div class="nav__group">
<h3 class="nav__header">Nav group</h3>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
Than I'd add a different styling for elements nested inside .nav--submenu. What you do want to avoid is cross-nesting between blocks, but inside them go with whatever feels right and if the block is getting too complex, think of extracting it's part to a new one.
I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
I create a very simple dropdown with sub level items in bootstrap 3 as below.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
File
<ul class="dropdown-menu">
<li>Company</li>
<li class="dropdown">
Utilities<span class="pull-right">ยป</span>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
</ul>
</li>
<li>Services</li>
</ul>
</li>
</ul>
</div>
I already include bootstrap.css, jquery.js adn bootstrap.js already. For the first level it works fine, but the second level does not work. I don't know why.
Bootstrap 3.x doesn't support dropdown submenus. You can achieve it by adding more css styles.
Follow this link https://stackoverflow.com/a/18024991/5488620
It may help you.
Just looked at the Bootstrap toolkit and attempting to get the dropdown's working on the top menu.
The code I have for the menu is as follows
<div class="topbar">
<div class="fill">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Site News</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Chatroom</li>
<li class="divider"></li>
<li>Forums</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Account
<ul class="dropdown-menu">
<li>Profile</li>
<li>Settings</li>
<li>Messages</li>
<li class="divider"></li>
<li>Admin</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The dropdown isn't doing anything when clicked?
I have included the following css file.
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
Can anyone help me here?
Thanks.
Try to add the JavaScript file for the dropdown functionality too - http://twitter.github.com/bootstrap/#javascript
You need to make sure that you have a reference to jquery, and a reference to the bootstrap js in your page.
e.g
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
Then, you either need to give one of your containers the attribute, data-dropdown="dropdown" , or explicitly set the container as a dropdown container using jquery, $('#mycontainerid').dropdown();
Generally having Jquery referenced above Bootstrap does the trick. You don't even have to mention bootstrap-dropdown explicitly. worked for me on two different occasions. Hope it helps!
Try adding the data-dropdown property to your initial <li> e.g.
<li class="dropdown" data-dropdown="dropdown">
Hope this helps.