Why doesn't the dropdown menu work?
This is an experiment in a customized bootstrap 4 menu using a flex layout. The reason I'm going this route (or attempting to) is because I want a custom slide-in collapsed menu- not the standard bootstrap layout.
This approach works fine for the menu items except the dropdown element "work" doesn't toggle. Any thoughts on why would be greatle appreciated.
HTML
CSS
This approach works fine for the menu items except the dropdown element "work" doesn't toggle. Any thoughts on why would be greatle appreciated.
HTML
<header class="container-bleed">
<div class="header-top">
<nav class="navbar navbar-fixed-top navbar-custom">
<div class="nav navbar-nav main-nav">
<div class="nav-item active">
<a class="nav-link" href="./index.htm">Home <span class="sr-only">(current)</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="./about.htm">About</a>
</div>
<div class="nav-item">
<a class="nav-link" href="./approach.htm">Approach</a>
</div>
<div class="nav-item dropdown">
<a class="dropdown-toggle nav-link" href="#" id="work" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<div class="dropdown-menu" aria-labelledby="#work">
<a class="dropdown-item" href="./work1.htm">Work 1</a>
<a class="dropdown-item" href="./work2.htm">Work 2</a>
<a class="dropdown-item" href="./work3.htm">Work 3</a>
</div>
</div>
<div>
<a class="logotype" href="./index.htm"><span class="brand-green">price</span><span class="brand-white">learman</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="./news.htm">News</a>
</div>
<div class="nav-item">
<a class="nav-link" href="./contact.htm">Contact</a>
</div>
<div class="nav-item">
<a class="nav-link" href="./blog.htm">Blog</a>
</div>
<div class="nav-item">
<a class="nav-link" href="./client.htm">Client</a>
</div>
</div>
</nav>
</div>
</header>CSS
#container-bleed {
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 0;
width:100%;
min-width: 100%;
}
#page-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background-color:$black-black;
}
#content-wrapper {
position: relative;
width: 100%;
height: 100%;
transform: translateX(0);
transition: .3s ease all;
}
.header-top{
width:100%;
height:auto;
background-color:$brand-black;
padding: 1rem 0;
margin-bottom:5rem;
}
.navbar-custom{
background-color:$brand-black;
}
.navbar-custom .nav-link{
color:$brand-white;
}
.main-nav{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items:center;
background-color:$brand-black;
width:84%;
max-width:95rem;
margin:auto;
}
.main-nav > div:nth-child(1) a:link,
.main-nav > div:nth-child(2) a:link,
.main-nav > div:nth-child(3) a:link,
.main-nav > div:nth-child(4) a:link,
.main-nav > div:nth-child(6) a:link,
.main-nav > div:nth-child(7) a:link,
.main-nav > div:nth-child(8) a:link,
.main-nav > div:nth-child(9) a:link {
font-family:$font-family-base;
font-size: $font-size-lg;
letter-spacing: .1rem;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Marco
This is because for some reason I'm investigating about, the dropdown-item class is not found so dropdown items are missing the property display set to block.
If you add it it works fine
Open in new window
You can see an example here: http://test.webintenerife.com/dropdown.phpBut this doesn't explain why dropdown-item class is not found in bootstrap css...