I tried to make a mega menu with bootstrap. I use the code of dropdown menu and I make some changes on the code, but the links in the dropdown don't work only if I open the link in new tab. Otherwise, when I press the link it closes the dropdown menu. I think maybe is something wrong with the class or js, but I am not sure.
#logo{
position: relative;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
#navbar{
position: -webkit-sticky;
padding-bottom: 10px;
padding-top: 10px;
z-index: 100;
background-color: #282b2e!important;
margin-bottom: 0px;
border-radius: 0px;
}
body {
margin: 0;
}
#megamenu{
padding: 30px;
}
#navlink{
margin-left: 15px;
margin-right: 15px;
color: #bfbfbf;
font-size: 16px;
}
#megamenucol{
align-self: baseline;
}
#navlink{
color: #bfbfbf;
}
#navlink:focus, #navlink:hover {
color: rgb(211, 152, 48);
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #d39830;
height: 4px;
-webkit-transition-property: left,right;
transition-property: left,right;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#megamenu {
position: absolute;
background: #54595f;
border-radius: 0px;
margin-top: 0px;
}
#h6{
color: #bfbfbf;
font-size: 14px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #d39830;
}
#dropdownitem {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #bfbfbf;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 14px;
}
#dropdownitem:focus, #dropdownitem:hover {
color: #d39830;
text-decoration: none;
background-color: #f8f9fa00;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" integrity="sha256-c+C87jupO1otD1I5uyxV68WmSLCqtIoNlcHLXtzLCT0=" crossorigin="anonymous" />
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" id="logo" href="https://www.dimtiles.gr/"><img src="https://www.dimtiles.gr/wp-content/uploads/2019/05/logo.png" width="90" height="90" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1,#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav1">
<ul class="navbar-nav ">
<li class="nav-item ">
<a id="navlink" class="nav-link hvr-underline-from-center " href="https://www.dimtiles.gr/">Αρχική</a>
</li>
<!----------------- MEGA MENU DAPEDO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Δάπεδο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Δαπέδου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-33-x-33/">33X33</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-45%cf%8745/">45X45</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-50%cf%8750/">50X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-60/">60X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-80%cf%8780/">80X80</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-120/">60X120</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%ce%bc%ce%b5%ce%b3%ce%b1%ce%bb%ce%b5%cf%83-%ce%b4%ce%b9%ce%b1%cf%83%cf%84%ce%b1%cf%83%ce%b5%ce%b9%cf%83/">120X240</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8760/">15X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8790/">15X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%cf%84-%ce%be%cf%85%ce%bb%ce%bf%cf%85-20%cf%87120/">20X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Παραδοσιακά</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%b1%cf%81%ce%b1%ce%b4%ce%bf%cf%83%ce%b9%ce%b1%ce%ba%ce%b1/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Επενδύσεις</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b5%cf%80%ce%b5%ce%bd%ce%b4%cf%85%cf%83%ce%b7/">Όλα τα προϊόντα</a>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Μπάνιο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
<div class="container">
<div class="row ">
<h6 id="h6">Πλακάκια Μπάνιου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-20%cf%8720/">20X20</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8750/">20X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8760/">20X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8750/">25X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8775/">25X75</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8790/">30X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-33%cf%8755/">33X55</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-40%cf%87120/">40X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (END) ----------->
</ul>
</div>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav2">
<ul class="navbar-nav ">
<!----------------- MEGA MENU KOYZINA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Κουζίνα</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton3">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Κουζίνας</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%ba%ce%bf%cf%85%ce%b6%ce%b9%ce%bd%ce%b1%cf%83/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Ψηφίδες</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU KOYZINA (END) ----------->
<!----------------- EIDIKA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Ειδικά</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton4">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Δάπεδο</h6>
<hr class="solid">
<a id="dropdownitem"class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#da">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Μπάνιο</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#to">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Κουζίνα</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Ψηφίδες</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#woo">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU EIDIKA (END) ----------->
<li class="nav-item">
<a class="nav-link hvr-underline-from-center" href="#">Επικοινωνία</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The dropdown only works when href have # in that
Related
I have navigation menu that contains links,
what I want to achieve is to make the whole li element clickable as a link.
so how to achieve that please?
I'm using bootstrap 3.2 library.
below is the HTML and CSS code.
User wants to able to click on the Link from anywhere inside the li html element
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 10px 24px;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>
Remove li padding and add width 100% and padding to a tag
li.nav-item > a, li.nav-item > .dropdown show a{
display: block;
width: 100%;
}
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
li.nav-item a{ padding: 10px 0px;}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 0px 24px;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>
Do not render the <li> big, but the <a>. The anchor element already has all the bindings necessary to provide an accessible and very usable link. Rendering it bigger improves usability.
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
}
#navbarSupportedContent .nav-link {
display: block;
border-right: 1px solid #01154D;
padding: 10px 24px;
}
#navbarSupportedContent .nav-link:hover {
background-color: #DBDDFD;
color: #000 !important;
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav>
</div>
</div>
</div>
So a simple CSS only solution would be;
Remove the padding from li element.
Make the a tag a block and give it 100% width
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 0;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}
#navbarSupportedContent .nav-item a {
display: block;
width: 100%;
padding: 10px 24px; // removed from list and added here for same visual effect
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>
Simple Solution, Just throw list (li) between the anchor tags (a)
<ul class="navbar-nav mr-auto" style="float:inherit;">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<li class="nav-item active">
<span id="submenu1">Home</span>
</li>
</a>
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<li class="nav-item ">
<span id="submenu1">Employee Tools</span>
</li>
</a>
</ul>
How can I align text to the middle in a dropdown menu navbar?
I have this:
I already try to follow snippets but I don't have success.
<ul class="navbar-nav ml-auto">
<li ngbDropdown class="nav-item dropdown">
<a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>menu</span>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item">OPTION 1</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTON 2</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTION 3</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTION 4</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTON 5</a>
</div>
</li>
</ul>
This is my actual code
https://codeply.com/p/zNU5s3kyQl
Use below CSS in your dropdown-item or add d-flex justify-content-center align-items-center classes in each dropdown-item.
.dropdown-item {
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-menu hr {
margin-top: 0;
margin-bottom: 0;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu a {
height: 53px;
}
.dropdown-item {
text-align: center;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #F3F3F3;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<ul class="navbar-nav ml-auto">
<li ngbDropdown class="nav-item dropdown">
<a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>menu</span>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 1</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 2</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 3</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 4</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 5</a>
</div>
</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Hello I'm having a problem with my bootstrap dropdown every dropdown has to start where the first nav option is like in the pictures below. If you need some more info just tell me and i will add it to this post.
I've did some research already and I've seen some examples about mega menu stuff but i couldn't get it to work in my project so i started to do it my self.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
display: block;
width: 100%;
min-height: 250px;
margin-bottom: 10px;
padding: 5px;
}
.Tilebackground {
background-color: #efefef !important;
width: 200px !important;
height: 145px !important;
margin-right: 20px !important;
}
.Tileheader {
font-family: 'Segoe UI Emoji';
color: #414142;
font-size: 18px;
font-weight: 400;
line-height: 12.926px;
transform: scale(1.259, 1.259);
text-align: center;
margin-top: 20px;
}
.Tilefooter {
font-family: 'Segoe UI';
color: #414142;
font-size: 12px;
font-weight: 200;
line-height: 18px;
margin-top: 10px;
}
.dropdown-toggle::after {
display: none;
}
.mega-menu {
width: 863px !important;
height: auto !important;
background-color: grey;
}
.dropdown-item {
color: white !important;
}
.btn {
box-shadow: none !important;
}
.btn-secondary {
border-color: initial !important;
}
.dropdown:hover>.dropdown-menu {
display: block;
}
.relative {
position: relative;
top: 0;
}
.absolute {
position: absolute;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color: #787878;">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-dark" style="width: 100%; background-color: #787878; padding-left: 40px; padding-right: 40px;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Over Connect Pro</a></li>
<li class="nav-item"><a class="nav-link" href="#">Referenties</a></li>
<li class="nav-item"><a class="nav-link" href="#">Vacatures</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid" style="background-color: #FFF; border-bottom: 1px solid #787878;">
<div class="row">
<nav class="navbar navbar-expand-lg navbar" style="width: 100%; padding: 20px; padding-left: 40px; padding-right: 40px;">
<a class="navbar-brand" href="#" style="color: #000"><img src="images/toplogo.png" alt="Connect Pro"></a>
<button class="navbar-toggler" style="color: #000" type="button" data-toggle="collapse" data-target="#navbarSupported">
<span class="navbar-toggler-icon" style="color: #000" ></span>
</button>
<div class="collapse navbar-collapse relative" id="navbarSupported">
<ul class="navbar-nav ml-auto">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle Tilebackground" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<p class="Tileheader">Onze aanpak</p>
<p class="Tilefooter">PROACTIEVE ICT <br> ONDERSTEUNING <br> VOOR BEDRIJVEN</p>
</button>
<div class="dropdown-menu mega-menu w-100 absolute container" aria-labelledby="dropdownMenuButton">
<div class="row w-100 d-flex">
<div class="col">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">And an another action</a>
<a class="dropdown-item" href="#">one more action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">And an another action</a>
<a class="dropdown-item" href="#">one more action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">And an another action</a>
<a class="dropdown-item" href="#">one more action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle Tilebackground" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<p class="Tileheader">Oplossingen</p>
<p class="Tilefooter">LOKALE INFRASTRUCTUUR,<br> CLOUD, VOIP, SECURITY, <br>TICKETING, MONITORING,...</p>
</button>
<div class="dropdown-menu mega-menu w-100 absolute container" aria-labelledby="dropdownMenuButton2">
<div class="row w-100">
<div class="col">
<a class="dropdown-item" href="#">Action2</a>
<a class="dropdown-item" href="#">Another action2</a>
<a class="dropdown-item" href="#">Something else here2</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action2</a>
<a class="dropdown-item" href="#">Another action2</a>
<a class="dropdown-item" href="#">Something else here2</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action2</a>
<a class="dropdown-item" href="#">Another action2</a>
<a class="dropdown-item" href="#">Something else here2</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle Tilebackground" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<p class="Tileheader">Producten</p>
<p class="Tilefooter">FIREWALLS, PRINTERS, <br> NOTEBOOKS, SIP PHONES, <br>EN MEER</p>
</button>
<div class="dropdown-menu mega-menu w-100 absolute container" aria-labelledby="dropdownMenuButton3">
<div class="row w-100">
<div class="col">
<a class="dropdown-item" href="#">Action3</a>
<a class="dropdown-item" href="#">Another action3</a>
<a class="dropdown-item" href="#">Something else here3</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action3</a>
<a class="dropdown-item" href="#">Another action3</a>
<a class="dropdown-item" href="#">Something else here3</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action3</a>
<a class="dropdown-item" href="#">Another action3</a>
<a class="dropdown-item" href="#">Something else here3</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle Tilebackground" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<p class="Tileheader">Partners</p>
<p class="Tilefooter">ONS NETWERK VAN <br> LOKALE IT PARTNERS <br>OVER HEEL BELGIË</p>
</button>
<div class="dropdown-menu dropdown-menu-right mega-menu container" aria-labelledby="dropdownMenuButton4">
<div class="row">
<div class="col">
<a class="dropdown-item" href="#">Action4</a>
<a class="dropdown-item" href="#">Another action4</a>
<a class="dropdown-item" href="#">Something else here4</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action4</a>
<a class="dropdown-item" href="#">Another action4</a>
<a class="dropdown-item" href="#">Something else here4</a>
</div>
<div class="col">
<a class="dropdown-item" href="#">Action4</a>
<a class="dropdown-item" href="#">Another action4</a>
<a class="dropdown-item" href="#">Something else here4</a>
</div>
</div>
</div>
</div>
</ul>
</div>
</nav>
</div>
</div>
A quick, slightly hacky fix, but one the only way I can think of using bootstrap.
As the first box dropdown is working fine this one is good. However for the other 3 boxes I have given them each a class (I used dd-2, dd-3 and dd-4).
All I did was set the position: absolute; left: figure to minus the width of the button (220px)
(added) CSS:
.dd-2 //dropdown box 2 {
left: -220px;
}
.dd-3 //dropdown box 3 {
left: -440px;
}
.dd-4 //dropdown box 4 {
left: -660px;
}
here is my codepen showing how this was used (sorry I split your code up for my codepen) : https://codepen.io/CodeBoyCode/pen/Pyyvgw
Let me know if this is what you were looking for
Thanks
I have a website that I am developing utilizing the Bootstrap 4 framework. I am trying to create a navbar with the navbar-brand in the center. I was able to place the navbar-brand in the center with a navbar-nav on each side of the navbar-brand. Please find below the code that I utilized. My issue is that the navbar-brand is vertically aligned in the center of the navbar.
How can I align the navbar-brand to the bottom of the navbar and have the excess stick out at the top of the navbar without adjusting the margins?
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit;
}
#tblHeader {
width: 100%;
/*font-size: .8125rem;*/
font-size: 1rem;
text-align: right;
color: #ffffff;
font-weight: bold;
}
#tblHeader tr {
height: 50px;
}
.breadcrumb {
background-color: inherit;
margin-bottom: initial;
font-weight: bold;
}
.breadcrumb .active {
color: inherit;
}
#socialbrand {
text-align: right;
}
#mainNavbar {
background-color: gray;
}
#mainNavbar .container .navbar {
position: relative;
z-index: 0;
max-height: 40px;
}
.navbar-brand {
position: relative;
z-index: 1;
margin-right: initial;
}
.form-control {
width: 200px;
}
.btn-outline-navy {
color: #f6b40e;
background-color: transparent;
background-image: none;
border-color: #f6b40e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="hdrContainer" class="container-fluid">
<div class="container">
<table id="tblHeader">
<tbody>
<tr>
<td>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
</ol>
</nav>
</td>
<td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-flickr" aria-hidden="true"></i>
<i class="fa fa-wordpress" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td colspan="2">
<nav class="navbar navbar-light">
<form class="form-inline">
<input class="form-control form-control-sm ml-auto mr-sm-2 float-right" placeholder="Search" aria-label="Search" type="search">
<button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="mainNavbar" class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- Just an image -->
<a class="navbar-brand mr-auto ml-auto" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="75" height="75">
</a>
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The solution below makes use of the various flexbox utility classes available in Bootstrap, described in detail in the docs.
The .navbar-brand got wrapped into <div id="logo"> in order to set it's positioning to absolute, and it's bottom position to 0. That pushes down the logo container to the bottom of the navbar.
Additionally, I've added the .d-none .d-lg-block classes in order to hide the logo when the menu is collapsed.
Available as a CodePen as well.
/* Pushing logo to bottom */
#logo {
position: absolute;
bottom: 0;
}
/* Basic styling to resemble to source */
.navbar {
background-color: gray;
}
#header {
height: 100px;
color: white;
background-color: #0a3782;
display: flex;
justify-content: center;
align-items: center;
}
<div id="header">[header placeholder]</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<div id="logo" class="d-none d-lg-block">
<a class="navbar-brand m-0" href="#">
<img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Item 1</a>
<a class="nav-item nav-link" href="#">Item 2</a>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
im trying to replicate this image as an exercise. original image
But, right now it looks like this. current homepage
Based on my html file, under 'banner' comment, i created a 'jumbo div' so that all elements inside it wrap in a full width dekstop. Then, under 'jumbo div' i created some 'col-sm-n container' so that the elements inside my 'jumbo div' take the amount of space which i assigned.
So, my questions is this the correct way for me to do it to achieve just like the original image. And if yes, what did i do wrong because there are like huge gap after the navbar and those elements not inline.
body {
font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
padding: 0;
margin: 0;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
margin: 0 30px;
}
#navbarSupportedContent {
margin-left: 50px;
}
.btn {
padding: .75rem 1.5rem;
line-height: 1.25;
margin-left: 30px;
}
.btn-outline-light:hover {
background-color: transparent;
}
.btn-outline-light.focus, .btn-outline-light:focus {
box-shadow: none;
}
.dropdown-menu {
margin: 2.2rem 1rem 1rem 1rem;
font-size: 0.9rem;
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
color: #fff;
background: #bf1e2e;
padding:13px 0px;
border-top: 1px solid #fff;
border-radius: 0;
}
.dropdown-menu a {
color: #fff;
font-weight: 200;
margin: 15px 0 15px 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #000;
text-decoration: none;
background-color: #bf1e2e;
}
.dropdown-menu > li{
display:inline-block;
}
ul.navbar-nav li:hover > div.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Intermark Mall | Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #bf1e2e;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://i64.tinypic.com/213n9mc.png" width="275" height="90" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mall Info</a>
<a class="dropdown-item" href="#">Precincts</a>
<a class="dropdown-item" href="#">Mall Location</a>
<a class="dropdown-item" href="#">Getting There</a>
<a class="dropdown-item" href="#">Car Park Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Directory</a>
<a class="dropdown-item" href="#">Promotions</a>
<a class="dropdown-item" href="#">Floor Plan</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HAPPENINGS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Events</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CONTACT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Talk to Us!</a>
</div>
</li>
<a class="btn btn-outline-light" href="#" role="button">TOURIST PRIVILEGE</a>
</ul>
</div>
</div>
</nav>
<!-- Banners -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<div class="row">
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-4">
<img src="http://i68.tinypic.com/2462d89.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</figure>
<figure class="col-sm-3">
<img src="http://i66.tinypic.com/2rvyo0h.jpg"/>
</figure>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
element is itself an inline element. If you want all images to be align side by side use the max-width:100%; and float the elements properly and clear float in the end. As you are using bootstrap classes then use them in combination of col-3 to place all four images in one line.
body {
font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
padding: 0;
margin: 0;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
margin: 0 30px;
}
#navbarSupportedContent {
margin-left: 50px;
}
.btn {
padding: .75rem 1.5rem;
line-height: 1.25;
margin-left: 30px;
}
.btn-outline-light:hover {
background-color: transparent;
}
.btn-outline-light.focus, .btn-outline-light:focus {
box-shadow: none;
}
.dropdown-menu {
margin: 2.2rem 1rem 1rem 1rem;
font-size: 0.9rem;
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
color: #fff;
background: #bf1e2e;
padding:13px 0px;
border-top: 1px solid #fff;
border-radius: 0;
}
.dropdown-menu a {
color: #fff;
font-weight: 200;
margin: 15px 0 15px 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #000;
text-decoration: none;
background-color: #bf1e2e;
}
.dropdown-menu > li{
display:inline-block;
}
ul.navbar-nav li:hover > div.dropdown-menu {
display: block;
}
figure img{max-width:100%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Intermark Mall | Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #bf1e2e;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://i64.tinypic.com/213n9mc.png" width="275" height="90" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mall Info</a>
<a class="dropdown-item" href="#">Precincts</a>
<a class="dropdown-item" href="#">Mall Location</a>
<a class="dropdown-item" href="#">Getting There</a>
<a class="dropdown-item" href="#">Car Park Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Directory</a>
<a class="dropdown-item" href="#">Promotions</a>
<a class="dropdown-item" href="#">Floor Plan</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HAPPENINGS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Events</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CONTACT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Talk to Us!</a>
</div>
</li>
<a class="btn btn-outline-light" href="#" role="button">TOURIST PRIVILEGE</a>
</ul>
</div>
</div>
</nav>
<!-- Banners -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<div class="row">
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</figure>
<figure class="col-sm-3">
<img src="http://i66.tinypic.com/2rvyo0h.jpg"/>
</figure>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>