Above is a screenshot taken with the responsive design feature built into Safari on OS X. Below, is the code used to produce the navbar, as you can see, the dropdown menu on the right continues off the page. How can I prevent this?
<div class="container">
<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #ecf0f1">
<a class="hidden-xs-down navbar-brand" href="/">
Brand
</a>
<ul class="nav navbar-nav">
<li class="nav-item hidden-sm-up">
<a class="nav-link" href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-briefcase"></i>
<span class="hidden-xs-down"> Work</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-wrench"></i> Services
</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-users"></i>
<span class="hidden-xs-down"> Team</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-user"></i> People
</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-building-o"></i>
<span class="hidden-xs-down"> Company</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-newspaper-o"></i> News
</a>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-user"></i>
<span class="hidden-xs-down"> Username</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-inbox"></i> Inbox
</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">Events</div>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-calendar"></i> All Events
</a>
<a class="dropdown-item"
href="#"
>
</div>
</div>
</li>
</ul>
</nav>
</div>
I just had to add the class dropdown-menu-right to the dropdown-menu element.
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-user"></i>
<span class="hidden-xs-down"> Username</span>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
You should add extra .dropdown-menu-right class to your .dropdown-menu element.
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="user-menu">
<a class="dropdown-item"
href="#">
<i class="fa fa-fw fa-wrench"></i> Services
</a>
</div>
JSfiddle here
Related
I have this bootstrap html code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
I want to add stylesheet in the below line to make the text "Home" look white. Kindly help.
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
Kindly help me to apply stylesheet in the above line to make the test look white. I need to apply white color on this.
Add on your Home text-light. I change the background to dark so the home to be visible
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-dark navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link text-light" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
I intend to slightly change the navbar-toggler-icon more to the left and their respective menus as well. I have already tried to change the position in the css but this only changes the icon shown in the image and the menus are exactly the same. Could they help me? Thank you.
https://imgur.com/MZBGbCC
Code of the menu:
<span></span>
<div class="menu">
<nav class="navbar container-fluid navbar-expand-lg navbar transparent">
<button class="navbar-toggler navbar-toggler-right" id="menu_colapso" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="conteudo/menu.png" id="imagem_icon"></span>
</button>
<a class="navbar-brand">
<img src="conteudo/asus.png" class="collapse navbar-collapse" id="imagem_logo">
</a>
<div class="collapse navbar-collapse pr-5 mt-5" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto"> <!--mr-auto para voltar ao lado esquerdo-->
<li class="nav-item">
<a class="nav-link" id="linhaactiva" href="inicio">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="destaques">Destaques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="museu">Museu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Urgeiriça</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="historia">Cronologia</a>
<a class="dropdown-item" href="bairro">Bairro Mineiro</a>
<a class="dropdown-item" href="minas">As Minas</a>
<a class="dropdown-item" href="processamento">Processamento</a>
<a class="dropdown-item" href="ambiental">Impactos Ambientais</a>
<a class="dropdown-item" href="saude_publica">Saúde Pública</a>
<a class="dropdown-item" href="recuperacao">Recuperação Ambiental</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mineiros</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="laborais">Condições Laborais</a>
<a class="dropdown-item" href="impacto_saude">Impacto na Saúde</a>
<a class="dropdown-item" href="mural">Mural</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Associação</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="fundacao">Fundação</a>
<a class="dropdown-item" href="objectivos">Objectivos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="informacoes">Informações </a>
</li>
<li class="nav-item">
<a class="nav-link"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PT</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="#">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</div>
padding-left:0 is what you're looking for...
You can do it on the toggler... which moves it left a little (class: pullToLeft)
You can do it on the nav... which moves it left little more (class: pullNavLeft)
I replaced the image you had so that I and other people on stack overflow can see the effects in action; working snippet below:
.pullToLeft {
padding-left: 0 !important;
}
.pullNavLeft {
padding: .5rem .3rem !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="menu">
<nav class="navbar container-fluid navbar-expand-lg navbar transparent pullNavLeft">
<button class="navbar-toggler navbar-toggler-right pullToLeft" id="menu_colapso" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="https://www.akberiqbal.com/favicon.ico" class='img-fluid ' id="imagem_icon"></span>
</button>
<a class="navbar-brand">
<img src="conteudo/asus.png" class="collapse navbar-collapse" id="imagem_logo">
</a>
<div class="collapse navbar-collapse pr-5 mt-5" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!--mr-auto para voltar ao lado esquerdo-->
<li class="nav-item">
<a class="nav-link" id="linhaactiva" href="inicio">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="destaques">Destaques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="museu">Museu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Urgeiriça</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="historia">Cronologia</a>
<a class="dropdown-item" href="bairro">Bairro Mineiro</a>
<a class="dropdown-item" href="minas">As Minas</a>
<a class="dropdown-item" href="processamento">Processamento</a>
<a class="dropdown-item" href="ambiental">Impactos Ambientais</a>
<a class="dropdown-item" href="saude_publica">Saúde Pública</a>
<a class="dropdown-item" href="recuperacao">Recuperação Ambiental</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mineiros</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="laborais">Condições Laborais</a>
<a class="dropdown-item" href="impacto_saude">Impacto na Saúde</a>
<a class="dropdown-item" href="mural">Mural</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Associação</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="fundacao">Fundação</a>
<a class="dropdown-item" href="objectivos">Objectivos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="informacoes">Informações </a>
</li>
<li class="nav-item">
<a class="nav-link"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PT</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="#">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
I'm using BootStrap v4.3 and I have problem with dropdown menu in navigation, it hides after right side of screen:
image of this dropdown
I speak straight away that adding negative margin-left won't work because it breaks on mobile devices then.
<nav class="navbar navbar-dark bg-primary navbar-expand-md">
<a class="navbar-brand" href="index.php" >
Nazwa
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-bar1" aria-controls="navbar-bar1" aria-expanded="false" aria-label="Przełączanie nawigacji" >
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-bar1" >
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Strona główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Zaloguj się lub zarejestruj</a>
</li>
<li class="nav-item dropdown">
<a id="navbar-subbar1" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Przełączanie menu konta" aria-haspopup="true" ><i class="fas fa-user"></i> Nacioszeczek</a>
<div class="dropdown-menu" aria-labelledby="navbar-subbar1">
<a class="dropdown-item" href="#"><i class="fas fa-user-tie"></i> Narzędzia administracyjne</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-user"></i> Moje konto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-cogs"></i> Ustawienia</a>
<a class="dropdown-item" href="#"><i class="fas fa-key"></i> Zmień hasło</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Wyloguj</a>
</div>
</li>
</ul>
</div>
</nav>
.dropdown-menu.show {
left: -98px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-primary navbar-expand-md">
<a class="navbar-brand" href="index.php">
Nazwa
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-bar1" aria-controls="navbar-bar1" aria-expanded="false" aria-label="Przełączanie nawigacji">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-bar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Strona główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Zaloguj się lub zarejestruj</a>
</li>
<li class="nav-item dropdown">
<a id="navbar-subbar1" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Przełączanie menu konta" aria-haspopup="true"><i class="fas fa-user"></i> Nacioszeczek</a>
<div class="dropdown-menu" aria-labelledby="navbar-subbar1">
<a class="dropdown-item" href="#"><i class="fas fa-user-tie"></i> Narzędzia administracyjne</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-user"></i> Moje konto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-cogs"></i> Ustawienia</a>
<a class="dropdown-item" href="#"><i class="fas fa-key"></i> Zmień hasło</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Wyloguj</a>
</div>
</li>
</ul>
</div>
</nav>
I have this navbar:
Where the army of shopping carts should not be collapsed if the screen is made smaller:
So far, so good...
However, when I click the toggle button, my army of shopping carts is also moved down with the menu, like this:
But I want my army of shopping carts, to stay up as well, like in this image (painted for now):
I've looked for a few hours now, and still can't achieve this behaviour. Here is the fiddle.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
<div class="d-flex order-lg-1 ml-auto pr-2">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</div>
</nav>
The question is very similar to this one, however, you don't see this behaviour there because the order of the navbar is different, which is what makes this question unique.
You can approach this using order-* classes. Just keep the order value of the items you want to keep on the top navbar lower than the value of the button that toggle the collapsed mode. In the next example:
(1) When navbar is not collapsed (lg screens) the army of shopping carts will have order-4 and go last.
(2) When navbar is collapsed, the army of shopping carts will have order-1 and the toggle collapsing button will have order-2. So the collapse button will not affect it.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand order-0" href="#">English Park Cuisine</a>
<div class="order-lg-4 order-1 ml-auto mr-2">
<a href="#" class="navbar-text">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</a>
<a href="#" class="navbar-text">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</a>
<a href="#" class="navbar-text">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</a>
</div>
<button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
Acasa<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>
try this:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<div class="d-flex order-lg-1 ml-auto pr-2" style="margin-right:20px;">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>
When the items are toggled to collapse they collapse side by side in the col-sm-2 class. Click the "Challenge Management" to see what It's doing.
I want "Challenge Management" to either take up 100% of the container or always have it stack properly.
Any thoughts? I'm missing something simple.
https://jsfiddle.net/egfs8t61/
<div class="col-sm-2" style="position:fixed;right: 0;left: 0;z-index: 1030; max-height:100%; overflow-y:auto; margin-top:-67px;padding-top:67px;">
<a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_ChallengeManagement" class="collapsed">
<strong> Challenge Management </strong>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse" id="menu_ChallengeManagement" aria-expanded="false" style="height: 0px;">
<li class="ui-sortable-handle" id="li_86">
<a href="#" onclick="changeIframe('/challenge/entry', '')">
<i class="glyphicon "></i> New Entry
</a>
</li>
<li class="ui-sortable-handle" id="li_87">
<a href="#" onclick="changeIframe('/challenge/list', '')">
<i class="glyphicon "></i> My Tasks <span class="badge badge-info MyTaskscount"></span>
</a>
</li>
<li class="ui-sortable-handle" id="li_88">
<a href="#" onclick="changeIframe('/challenge/history', '')">
<i class="glyphicon "></i> My Entries
</a>
</li>
</ul>
<a href="#" data-toggle="collapse" aria-expanded="true" data-target="#menu_Fabrication" class="">
<strong> Fabrication </strong>
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse in" id="menu_Fabrication" aria-expanded="true">
<li class="ui-sortable-handle" id="li_79">
<a href="#" onclick="changeIframe('/fms/index', '')">
<i class="glyphicon "></i> Fab Management (FMS)
</a>
</li>
<li class="ui-sortable-handle" id="li_80">
<a href="#" onclick="changeIframe('/que/departmentstatus', 'Org=&Page=1')">
<i class="glyphicon "></i> Department Status
</a>
</li>
<li class="ui-sortable-handle" id="li_85">
<a href="#" onclick="changeIframe('/schedule/taktmgr', '')">
<i class="glyphicon "></i> Takt Manager
</a>
</li>
</ul>
</div>
I did not understand your question completely. But is this what you looking for?
Fiddle here
<div class="col-sm-2" style="position:fixed;right: 0;left: 0;z-index: 1030; max-height:100%; overflow-y:auto; margin-top:-67px;padding-top:67px;">
<a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_ChallengeManagement" class="collapsed">
<strong> Challenge Management </strong>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse" id="menu_ChallengeManagement" aria-expanded="false" style="height: 0px;">
<li class="ui-sortable-handle" id="li_86">
<a href="#" onclick="changeIframe('/challenge/entry', '')">
<i class="glyphicon "></i> New Entry
</a>
</li>
<li class="ui-sortable-handle" id="li_87">
<a href="#" onclick="changeIframe('/challenge/list', '')">
<i class="glyphicon "></i> My Tasks <span class="badge badge-info MyTaskscount"></span>
</a>
</li>
<li class="ui-sortable-handle" id="li_88">
<a href="#" onclick="changeIframe('/challenge/history', '')">
<i class="glyphicon "></i> My Entries
</a>
</li>
</ul>
<br>
<a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_Fabrication" class="collapsed">
<strong> Fabrication </strong>
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse" id="menu_Fabrication" aria-expanded="true">
<li class="ui-sortable-handle" id="li_86">
<a href="#" onclick="changeIframe('/fms/index', '')">
<i class="glyphicon "></i> Fab Management (FMS)
</a>
</li>
<li class="ui-sortable-handle" id="li_87">
<a href="#" onclick="changeIframe('/que/departmentstatus', 'Org=&Page=1')">
<i class="glyphicon "></i> Department Status
</a>
</li>
<li class="ui-sortable-handle" id="li_88">
<a href="#" onclick="changeIframe('/schedule/taktmgr', '')">
<i class="glyphicon "></i> Takt Manager
</a>
</li>
</ul>
</div>