I created nav-pills with Twitter bootstrap 3.
Everything is fine except dropdowns.
Documentation shows the layout for tab links, but not for the content: http://getbootstrap.com/components/#nav-dropdowns
I want to show content when user selects one of the dropdown links.
Fiddle is like this: http://jsfiddle.net/mavent/skL5H/3/
<div class="tabbable">
<ul class="nav nav-tabs nav-pills" id="myTab">
<li class="active"> Part 1
</li>
<li class=""> Part 2
</li>
<li class="dropdown"> Activity <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
</ul>
</li>
</ul>
<br>
<div class="tab-content">
<div class="tab-pane active" id="tab1">aaaaaaaaaaaa</div>
<div class="tab-pane" id="tab2">bbbbbbbbbbbb</div>
<div class="tab-pane" id="tab3">cccccccccccccc</div>
<div class="tab-pane" id="tab4">dddddddddddddd</div>
</div>
</div>
Add data-toggle="dropdown" to the links in the .dropdown-menu.
http://jsfiddle.net/skL5H/5/
Related
I need to be able to add a link to "Home" and "Pages" when clicking it but also to collapse and show the li items from below.
I changed "#homeSubmenu" from a href with a link but when clicking it does not collapse.
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
Use data-bs-target for the Collapse and href for the link..
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
I'm migrating a website from Bootstrap 3.7 to Bootstrap 4. In my site, I have a banner across the top that looks like this:
+-----------------------------------------------------------+
| Item 1 Item 2 Item A Item B [note] |
+-----------------------------------------------------------+
The items in the left are dynamic. The items on the right are dynamic. The [note] piece shows occasionally. I had this working correctly with Bootstrap 3.7. However, when migrating to Bootstrap 4, the content is all left aligned. You can see the result in this Bootply. The code looks like this:
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline justify-content-end">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
I don't understand why the items are all left-aligned instead of filling the width of the page. What am I missing?
As explained here float won't work in the navbar since it's now flexbox. Use ml-auto to push the items to the right.
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline ml-auto">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
https://www.codeply.com/go/CGBAvf8r1q
Or, you can use mr-auto on the first nav.
Could you put your [note] item in with your second unordered list and and use justify-content-between in your wrapping div element? It would look something like this...
<nav class="navbar">
<div class="d-inline-flex justify-content-between" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
<li class="list-inline-item">[note]</li>
</ul>
</div>
</nav>
I have a Foundation 5 based site with a nav bar at the top.
Because my menu choices are larger text they overlap the left "Name" section when the screen is made narrower.
Is there a way to control when the nav menu slips into mobile style?
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
<a href="#">
<img src="mylogo.png"/>
</a>
</div>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span></span>
</a>
</li>
</ul>
<section class="top-bar-section hide-for-medium-down ">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
<a href="/home/index" class="menuMix">
#*<span class="menuMinor">Home Page</span>*#
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class="">
<a href="/home/about" class="menuMix">
#*<span class="menuMinor">Who We Are</span>*#
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class="">
<a href="/home/contact" class="menuMix">
#*<span class="menuMinor">Get In Touch</span>*#
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
If you use SCSS you can try to decrease
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);
To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!
try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>
I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle
I would like to open a dropdown menu (using Twitter Bootstrap) everytime I click on the brand of my navbar, so I tried this code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="tabbable">
<div class="dropdown">
<a id="drop1" class="dropdown-toggle" data-toggle="dropdown" href="#menu">
<div class="brand">Brand</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li>Action</li>
</ul>
</div>
<ul class="nav">
<li>
Item
</li>
</ul>
</div>
</div>
</div>
Result: when I click on it, the menu appears, but it's over the brand, not under. How to fix it?
Examples
Standard version [OK]: http://jsfiddle.net/4rdPU/2/
Standard version + div class="brand" [Style problem]: http://jsfiddle.net/4rdPU/1/
Brand version [Wrong menu position]: http://jsfiddle.net/4rdPU/3/
To properly render the dropdown, your brand must be a .nav li element. So just add the .brand class to a standard dropdown.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="tabbable">
<ul class="nav">
<li class="dropdown">
<a id="drop1" class="dropdown-toggle brand" data-toggle="dropdown" href="#menu">
Brand
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li>Action</li>
</ul>
</li>
<li>
Item
</li>
</ul>
</div>
</div>
</div>
That will break your brand positioning, but you fan fix it with this simple CSS:
.navbar .brand {
margin-left: 10px; /* This value could be different for another layout */
}