Bootstrap collapse menuitems (li) missing the regular listitem styling

Question

I am usually pretty used to find out my own issues when it comes to Bootstrap styling and elements, but this one.. just keeps giving me a headache, and therefore i need to ask you guys here.

I'm overriding some bootstrap styles, like the dropdown (hamburgermenu trigger dropdown) so it goes on top of other elements, rather than moving it downwards..

If you inspect my JSFiddle example after expanding the menu you see that i'm missing the relation to :

.navbar-default .navbar-nav>.active>a

.. the styling is completely gone, and i dont know why.

Here is a link to my JSFiddle

Answer 1

Found the issue.

its here in this HTML

 <a id="lnkTeamOverviewMobile" style="color:black" class="visible-sm" href="/EventCalendar" href="javascript:__doPostBack(&#39;ctl00$lnkTeamOverviewMobile&#39;,&#39;&#39;)">Eventkalender</a>

you have a class visible-sm which is set to display:none!important in bootstrap.css , If you use this class you are saying that to display this element only when you are in a small device, And Computer Monitors are usually Medium..

Remove the class visible-sm and it must work fine

Working Demo

Bootstrap collapse menuitems (li) missing the regular listitem styling

Sign up