moving the caret on the main menu #95

OurPerrin opened this Issue Jan 9, 2013 · 1 comment


None yet
1 participant


Just wondered if anyone can offer me some guidance please...

I am wanting to move the caret on the main menu to be centrally aligned underneath the menu...
I added a
tag to a copy of the bootstrap_demo.js file line 22. (which I have since copied if I need to make any amends.
However any menu items that have a caret/dropdown, push the padding of the a link down so i get a black bar.
adjusting the padding so that it is fixed for items with a dropdown makes the menus items rollover short on menu items without a caret/dropdown... I hope this makes sense...
Also adding margin-left to the caret... doesn't make it centrally aligned for all menu items, as they are all different widths.

I will attach an image to explain..

How is it best to resolve this... am I best adding some kind of conditional statement in so the any menu item a links with a caret have a certain amount of padding and any without have the standard. If so how do I do I don't know that much javascript.

Of is there a better way to do it?

Any help would be much appreciated.



Hi I found a solution to this:
I amended a custom version of the bootstrap_demo.js
to included the following lines.
// Adding dropdown caretdiv to all menu items, if it does not already exist.
$("ul.nav li a").append('

//add caret to all menu itmes that need it, so that it can be centred underneath.
$('div.nav-collapse .dropdown-toggle div.caretdiv:not(:has(b.caret))').append('');

I can then give the caretdiv a min height so that I can consistantly style each menu item whether they have a caret or not. I can then apply styling to the caret to centralise it.



Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment