-1

I did the following to make my navigation bar always collapsed. However, when you click on it, it's taking up the whole width of the screen. And when you click on Menu, the dropdown is occupying a small part only.

enter image description here

What I want is when I click the navigation icon in the right, it will expand but will not take the whole width of the screen. Instead I want it to display as it displays when the screen width is small just like in the picture

enter image description here

@media (max-width: 2000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

This is what I need: enter image description here

maxshuty
  • 9,708
  • 13
  • 64
  • 77
iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78

1 Answers1

0

Ok, so I'm still not sure why you want a menu inside a menu, but you could use a nav instead of a dropdown if you're looking for full width. The dropdown has a width of 160px. Use collapse to show/hide the submenu.

<a href="#" data-toggle="collapse" data-target="#menu1" role="button" aria-haspopup="true" aria-expanded="false">
    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
    <span>Menu</span>
</a>
<ul class="nav collapse" aria-labelledby="menu" id="menu1">
    <li>
        <div class="menu-content">
            <ul class="nav nav-stacked">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
                <li><a href="#">Item4</a></li>
            </ul>
        </div>
    </li>
</ul>

http://bootply.com/cv3l6gxjZn

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • first, i'm not looking for full width. my problem is if i view it on desktop and click the menu icon, it shows below "Menu" and "Others" in full width, but when you click the "Menu", the items under it are shown in shorter width. what i need is, when i click the menu icon, it should show below "Menu" and "Others" in a shorter width occupying only a portion to the right, not the whole screen width, since my menu icon is on the right, then when you click "Menu" it should show the items as what you saw when you view it on, say, phone screen. – iPhoneJavaDev Mar 07 '16 at 12:30
  • Sorry, still doesn't make sense to me. How about posting an image that shows what you want. – Carol Skelly Mar 07 '16 at 12:40
  • i updated the pictures above. what i need is even if i am viewing in the desktop, the menu should not occupy the whole width since my menu icon is on the right only. I updated the colouring in the image to clearly show how i want the menu dropdown to look like when viewed in desktop. as you can see it's the same as if you're viewing it in phone screen. – iPhoneJavaDev Mar 07 '16 at 12:54