Forums

Bootstrap 3 autonav caret not showing for drop down

Permalink
I am trying to get the caret to show for the drop down menu. I have tried a few thing with no success. Here is the code. Any suggestions?

echo '<ul class="nav navbar-nav">'; //opens the top-level menu
foreach ($navItems as $ni) {
   if ($ni->hasSubmenu) {
      echo '<li class="' . $ni->classes . '">'; //opens a nav item
        echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="dropdown-toggle" data-toggle="dropdown">' . $ni->name . '<b class="caret"> </b></a>';
        echo '<ul class="dropdown-menu">'; //opens a dropdown sub-menu
   } else {
      echo '<li class="' . $ni->classes . '">'; //opens a nav item
       echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
        echo '</li>'; //closes a nav item
      echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
   }
}
echo '</ul>'; //closes the top-level menu
 
goldhat replied on at Permalink Reply
I'm not familiar with Bootstrap but when I wondered what the heck is a caret (carrot??) I found it is normally used in a <span>. So maybe the CSS targets span.caret and you have b.caret? Checkouthttp://getbootstrap.com/components/... and try using the same markup like below:

<span class="caret"></span>
garyb10 replied on at Permalink Reply
Most of us use the markup I have. If you don't force it to become more visitable, it's hard to see. The problem has nothing to do with the html markup.

The html I am trying to replace 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"> </b></a>


I have tried like above and I have tried with this code for caret line and neither seem to work.
if ($ni->hasSubmenu) { echo ' dropdown-toggle" data-toggle="dropdown';}
   echo '">' . $ni->name ;
   if ($ni->hasSubmenu) { echo ' <b class="caret"></b>';}
   echo '</a>';
goldhat replied on at Permalink Reply
I don't agree that it's a good idea to use <b>, <i> or other outdated tags I'm sure the <span> or even a <strong> tag could work there.

If you find that <b> tag doesn't exist at all in your output for the menu, then you need to test what is the value of $ni->hasSubmenu at that point, try a var_dump on that. If it's not true when you expect it to be, trace that back to determine the issue.

If your <b> tag is in the menu output, then you have to inspect that element and determine if the caret style is being applied properly. It could be any number of problems that cause it to "not show up" because it's probably relying on a background image, display setting and other styles that could be overwritten or missing.
garyb10 replied on at Permalink Reply
"<b> tag should be used as a LAST resort when no other tag is more appropriate." In this case a strong tag will no work because the caret is a very small glyphicon.


The caret/b is not showing in the source at all. I will give your suggestion a try.

Thanks
goldhat replied on at Permalink Reply
The official bootstrap docs use <span> in this example and it probably has display:block applied to it in the CSS. And in fact because it works in their docs, you might find that bootstrap applies the needed styling automatically. I can't imagine a situation where I would actually need a <b> or <i> tag because I could always use a <span> and control it to create the same effect as a <b> or <i>. It's just a matter of choosing the display, like maybe display:block; didn't align it right so you could use display:inline-block instead.