Is it possible to center the dropdown below a pill (Bootstrap)? - html

So now I finally got my pill dropdown working but another question then arose - as I use nav-justified to center my navbar, the pills are quite wide and the dropdown is all the way to the left of the pill. Can I center this dropdown in any way?
The JSFiddle looks like this: https://jsfiddle.net/htsda5xo/1/
A snippet of the HTML:
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>

Try this,
.nav-justified>.dropdown .dropdown-menu {
/* top: auto; */
left: 50%;}

Try this
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>

Related

Bootstrap dropdown tabmenu

I am using the bootstrap tabmenu but now I want to make it a dropdown menu. I know that bootstrap have native support for this but I want the dropdown to be toggled only if the caret is clicked, if the rest of the menu item area are clicked that should work as an ordinary link. Do anyone know how to do this?
Here is what the code looks like today
jsfiddle-example
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>

Bootstrap Pills in Pills in Pills

Here's a link to the JSFiddle i'm currently working on. http://jsfiddle.net/PhoenixOfBlades/3bry9Lo8/6/
I feel like i've scoured the web for answers. I've found lots of questions from people who were confused about nesting Pills/Tabs but never with this many. I'm about this close to solving my issue but this last bit has me completely stumped.
I'm trying to create Pills inside of Pills inside of Pills inside of Pills for greater data organization in an interface. Currently I've got my Age Pills inside of my Canon Pills behaving exactly the way that I want them. And now I want to put my World Pills inside of my Age Pills but for some reason they act the same as my Age Pills and seem to be inside of my Canon Pills. I've tried learning more about Bootstrap as I suspect it may be a syntax issue of some kind but I haven't been able to find anything about Bootstrap's pills except for some code snippets. Here is the code from the fiddle that i'm working with exception of some irrelevant code I commented out at the bottom of the fiddle. The comment notes inside direct you to the section of the code dealing with the World Pills.
If someone could tell me how to put the World Pills inside of the Age Pills instead of the Canon Pills or explain to me why they are behaving this way I'd be very grateful.
<ul class="nav nav-pills nav-justified">
<li class="active">Canon 0</li>
<li class="">Canon 1</li>
<li class="">Canon 2</li>
<li class="">Canon 3</li>
<li class="">Canon 4</li>
<li class="">New Canon</li>
</ul>
<div class="tab-content">
<div id="Canon0" class="tab-pane active">
<h3>Section A</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
<!--down--->
<div class="tab-content">
<div id="#Canon0Age0" class="tab-pane active">
<h3>Section 1</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">World 0</li>
<li class="">World 1</li>
<li class="">World 2</li>
<li class="">World 3</li>
<li class="">World 4</li>
<li class="">World 5</li>
</ul>
</div>
</div>
<!---up--->
</div>
<div id="Canon1" class="tab-pane">
<h3>Section B</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
<!----down---->
<div id="#Canon0Age1" class="tab-pane">
<h3>Section 2</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">World 0</li>
<li class="">World 1</li>
<li class="">World 2</li>
<li class="">World 3</li>
<li class="">World 4</li>
<li class="">World 5</li>
</ul>
</div>
<!-----up----->
</div>
<div id="Canon2" class="tab-pane">
<h3>Section C</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
<div id="Canon3" class="tab-pane">
<h3>Section D</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
<div id="Canon4" class="tab-pane">
<h3>Section E</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
<div id="Canon5" class="tab-pane">
<h3>Section F</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
...On a side note this fiddle works currently but if I open a new fiddle and paste the code into it then it only appears as an unordered list. Why is that? Is it a matter of settings?
Thankyou ioneyed for answering the bonus question ^_^ I'm no longer ignorant of the External Resources tab in which I had bootstrap.min.css and bootstrap.min.js
I am not sure if this completely answers your questions. Let me know and I can revise it...
But I assume you want to nest objects. Pills cannot be nested like that in bootstrap. However you could nest pills inside of a drop down.
Please see attached jsfiddle: http://jsfiddle.net/u6Lczfz6/
Code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Age 0
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">World 0</li>
<li>World 1</li>
<li>World 2</li>
<li>etc...</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Age 1
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">World 0</li>
<li>World 1</li>
<li>World 2</li>
<li>etc...</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
etc..
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">World 0</li>
<li>World 1</li>
<li>World 2</li>
<li>etc...</li>
</ul>
</div>
</div>
</div>
</div>

Jasny bootstrap mobile not working

I am using Jasny Bootstrap for my responsive website. However, the links for the sub-navigations does not work on mobile. I am able to click into the links when I test it on my desktop. But when I test it on my phone, it only closes the navigation side bar. Following is my code:
<!--mobile nav-->
<nav id="mob-nav" class="navmenu navmenu-inverse navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><span>Home</span></li>
<li class="dropdown"><span>Courses</span> <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav" role="menu">
<li class="dropdown">Sub Nav 1</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 2</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 3</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 4</li>
</ul>
</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</nav>
<!--end mobile nav-->
Could it be a case of clashing js?
Edit: I did some trial and error and found that the class "navmenu-nav" is causing the problem. But I am still unsure how I can debug this.
These are the only js attached:
<script src="js/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jasny-bootstrap.js"></script>
<script src="js/readmore.js"></script>
Just found the answer!
Add: .navmenu-nav.dropdown-menu { position:relative; } to your CSS and like magic, it will work!

Not able to write article after vertical menu in HTML

I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));

Bootstrap dropdown doesn't align properly

I'm trying to make a bootstrap nav (v2.3.2) and the formatting looks like:
This:
wrong http://tastytreatthursday.com/nav1.jpg
Instead of this:
wrong http://tastytreatthursday.com/nav2.jpg
<div class="navbar visible-desktop visible-tablet">
<div class="navbar-inner">
<a class="brand" href="http://myurl" style="margin:0; padding:0;"><img style="z-index:1; position:relative;" height="125px" width="125px" src="myLogo.png"></a>
<ul class="nav nav-pills">
<!--item-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Test title<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2 Test 2 Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<!--item-->
</ul>
</div>
</div>
Can anyone point out what I'm doing wrong?
Would make it easier to answer your question with a Fiddle of what you have. Looks like you may have done changes to your CSS, as shown in http://jsfiddle.net/Wa5vS/, it seems to work properly with your same html.
Even if you add:
.dropdown-menu {
text-align: center;
}
Shows properly, so you must have changed something.
I tried your code and it worked for me. Makere usre you put it inside a row class and inside another span class. When I put the code it work like a charm.
<section class="row-fluid ">
<aside class="span12">
<div class="navbar visible-desktop visible-tablet">
<div class="navbar-inner"> <a class="brand" href="http://myurl" style="margin:0; padding:0;"><img style="z-index:1; position:relative;" height="125px" width="125px" src="wp-content/themes/img/lcva_logo.png"></a>
<ul class="nav nav-pills">
<!--item-->
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Test title<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2 Test 2 Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<!--item-->
</ul>
</div>
</div>
</aside>
</section>