CODEWITHSUNDEEP
cssmobilenavigationhide
bauhau5
bauhau5

Reputation: 15

Hiding ul li on mobile

I'm using the bootstrap framework to develop the front end for a e-commerce site. In order to create a optimal mobile experience I want to hide the child items for the primary navigation on mobile and instead have the user click the primary items then be taken to the product page quicker where they can begin browsing items.

Is there anyway to do this?

Here is a snippet of the nav code, the entire nav is pretty long, basically I want to hide all level-2 li on mobile.

<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav nav-justified horizontal-drop-down">
<li class="level-1">
<a href="#">All Products</a>
<ul>
<li class="level-2">
<a href="#">Accessories</a>
</li>
</ul>
</li>
</nav>

Upvotes: 0

Views: 2108

Answers (2)

abbott567
abbott567

Reputation: 862

Use a media query?

@media (max-width: 767px) {
     .level-2 {
         display: none;
    }
}

This would set the class level-2 to display none on anything under 767px wide... Obviously you can just change the width to suit your application =)

Upvotes: 3

msm.oliveira
msm.oliveira

Reputation: 211

You can add to your CSS page:

.level-2 {
display: none;

}

Fiddle here

Upvotes: 0

Related Questions