Witam, chciałbym nadać jakiś wstępny wygląd dla mojej aplikacji, a jako że słabo znam css html i bootstrap nie wiem jak sobie poradzić z pewną rzeczą.
Chcę za pomocą bootstrap stworzyć sobie menu kategorii. Mam je już tylko że teraz zależy mi na tym żeby było ono nieruchome, tzn że niezależnie czy mam przeglądarkę w trybie pełnoekranowym, czy trochę mniejszym ciągle pozostawało w takich samych rozmiarach, aż w przypadku określonej małej rozdzielczości przy której moje menu kategorii zmienia się w pasek i wędruje na górę strony(co udało mi się już osiągnąć).
Jak to zrobić ? użycie
<div class="col-sm-3 col-lg-2 col-md-2">
dla bloku menu kategorii chyba odpada, bo nie podoba mi się w tym przypadku rezultat
Taki mam kod, którego rezultat przedstawiają zdjęcia w załącznikach
<body>
<div class="row">
<div class="col-sm-3 col-lg-2 col-md-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Reviews <span class="badge">1,118</span></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
Main content goes here
@RenderBody();
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>