CODEWITHSUNDEEP
css
Suffii
Suffii

Reputation: 5784

Having Issue on Showing Drop Down in Small Device

Can you please take a look at This Demo and let me know why the drop down on Snippets is not rendering on the top level in Small Devices( it is working fine on big screens but if you take a look at it at Phone view, it is gonaa be hide behind .navbar-collapse ? I tried adding high number z-index to .droper but it didnt work

<nav class="navbar navbar-default site-navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav menu pull-right">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
 <li class="menu-itemb"><a href="#">Snippets</a>
      <ul class="droper">
        <li class="menu-item sub-menu"><a href="#">CSS</a></li>
        <li class="menu-item sub-menu"><a href="#">HTML</a></li>
        <li class="menu-item sub-menu"><a href="#">jQuery</a></li>
        <li class="menu-item sub-menu"><a href="#">PHP</a></li>
        <li class="menu-item sub-menu"><a href="#">WordPress</a></li>
      </ul>
    </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 89

Answers (2)

Aakash
Aakash

Reputation: 1791

The answer by @Wavemaster is what you should use if you want bootstrap styling. But, if you still what to go with your implementation. Then you'll have be do something like this.

@media (max-width : 768px){
    .site-navigation ul li ul {
        position: relative;
    }

}

Upvotes: 1

Wavemaster
Wavemaster

Reputation: 1814

Use theese classes for your dropdown:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Snippets</a>
    <ul class="dropdown-menu">
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
    </ul>
</li>

See also the bootstrap documentation about navbars.

Try to avoid to style to much by yourself. Instead use the bootstrap css and edit it exactly where you need it.

For example, use the basic starter template on bootply and change the text on the navigation.

Upvotes: 0

Related Questions