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
Related
I am making a project and I added a dropdown menu on navbar and I don't know why that it seems to push the HTML down when toggled. I tried making its position absolute and top 100% but it didn't work, I am using bootstrap, please help
Here is the main HTML
body{
background-color: #0b0c10!important;
}
nav{
background-color: #0b0c10!important;
color: turquoise;
text-decoration: none;
}
nav a{
color: turquoise;
text-decoration: none;
font-family: 'Lato', sclear-serif;
}
nav a:hover{
color: white;
text-decoration: none;
transition-duration: 1s;
}
.navbar-nav{
margin-right: 80px;
text-align: center!important;
}
.navbar-brand{
font-family: 'Lobster', cursive;
font-size: 30px!important;
margin-left: 30px;
}
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#">Calcify</a>
</button>
<ul class="navbar-nav">
<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">
More Calculator
</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>
</ul>
</nav>
I think you have to add jquery.min.js, popper.min.js, and bootstrap.min.js.
In the introduction of Bootstrap it states which imports you need to add. https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start
You have to add some scripts in order to get bootstrap fully working. It's important that you include them in this exact order. Popper.js is one of them:
<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>
Example
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#">Calcify</a>
<ul class="navbar-nav">
<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">
More Calculator
</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>
</ul></nav>
.navbar{
align-items: stretch!important;
}
.navbar-nav .dropdown-menu {
position: absolute;
}
for your dropdown items list use
position:absolute;
z-index:5;
this worked for me
body{
background-color: #0b0c10!important;
}
nav{
background-color: #0b0c10!important;
color: turquoise;
text-decoration: none;
}
nav a{
color: turquoise;
text-decoration: none;
font-family: 'Lato', sclear-serif;
}
nav a:hover{
color: white;
text-decoration: none;
transition-duration: 1s;
}
.navbar-nav{
margin-right: 80px;
text-align: center!important;
}
.navbar-brand{
font-family: 'Lobster', cursive;
font-size: 30px!important;
margin-left: 30px;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Calcify</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 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More Calculator
</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>
</ul>
</div>
</nav>
I am trying to achieve attached design in HTML CSS and Bootstrap but I couldn't do it perfectly. I came across button group but nothing like dropdown group or anything. Can some one help me.
What I Want:
HTML
<div class="btn-group form-group mt-3 col-sm-12 ml-4" role="group">
<span class="row">
<button type="button" style="background: #579ffb;color: white; height: 2.3em;" class="btn col-sm-3">From</button>
<select class="form-control col-lg-3 col-md-3 col-sm-3 col-3 " name="hours" style="border-color: #579ffb;margin-left: -0.7%;color: #b6b7b7; height: 2.3em;">
<option *ngFor="let time of times" [value]="time" (ngModelChange)="onChange($event)">
{{time}}
</option> //prints 1 to 12 in dropdown
</select>
<select class="form-control col-lg-3 col-md-3 col-sm-3 col-3 " [(ngModel)]="from_minutes" name="minutes" style="
border-color: #579ffb;
margin-left: -0.7%;
color: #b6b7b7;
height: 2.3em;
">
<option *ngFor="let hour of hours" [value]="hour" (ngModelChange)="onChange($event)">
{{time}}
</option> //prints 00 to 59 in dropdown
</select>
<select class="form-control col-lg-3 col-md-3 col-sm-3 col-3 " [(ngModel)]="from_time" name="from_time" style="
border-color: #579ffb;
margin-left: -0.7%;
color: #b6b7b7;
height: 2.3em;
">
<option [ngValue]="AM">AM</option>
<option [ngValue]="PM">PM</option>
</select>
</span>
</div>
Just use the same button group, but put dropwdown buttons in instead of regular buttons.
Dropdowns: https://getbootstrap.com/docs/4.0/components/dropdowns/
Button Groups: https://getbootstrap.com/docs/4.1/components/button-group/
Borders: https://getbootstrap.com/docs/4.0/utilities/borders/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group border border-primary rounded" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">From</button>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HH
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MM
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
AM
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
It worked for me. Please see the runnable snippet below.
.dropdown-toggle::after {
display: none !important;
}
p1:before {
content: '\f107';
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
.custom-carets {
border-right: 1px solid #007BFF;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="btn-group border border-primary rounded" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">From</button>
<div class="dropdown custom-carets">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HH
<p1></p1>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown custom-carets">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MM
<p1></p1>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
AM
<p1></p1>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
I am working on a website in which the submenu dropdown items appears at the bottom as shown below.
The HTML/CSS code which I have used for that are as follows:
HTML Code:
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!--
<button type="submit" onclick="location.href='/prostore';" class="btn btn-default">Hello World</button>
-->
<li class="menu-item nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">about</a>
<a class="dropdown-item" href="#">blog</a>
<a class="dropdown-item" href="#">contact us</a>
<div class="submenu-item">
<a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Social
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink">
<a class="dropdown-item" href="#">T</a>
<a class="dropdown-item" href="#">U</a>
<a class="dropdown-item" href="#">V</a>
<a class="dropdown-item" href="#">W</a>
</div>
</div>
</div>
CSS code:
.menu-item:hover > .dropdown-menu {
display: block;
}
/* makes sub-menu S open on hover */
.submenu-item:hover > .dropdown-menu {
display: block;
}
Problem Statement:
I am wondering what changes I should make in the HTML/CSS above so that if we hover on Social, the drop-down items T, U, V and W are displayed towards the right similar to this
Prior to bootstrap 4 you would use pull-right, but since 4 they changed the pull-right to float-(sm,md,lg,xl)-(left,right,none). So I would try float-sm-right. https://getbootstrap.com/docs/4.0/migration/#utilities
I copied the code from bootstrap website.
<div class="bd-example">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu" x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(108px, 0px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropright show">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu show" x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(153px, 0px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
I see this is not in your code
x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(108px, 0px, 0px);"
and
<div class="btn-group dropright show">
try adding these to your code.
1) Why I can not change the nav-link color on CSS?
I'm trying to change the color of MENUTEST's (nav-link) to white, but it's not working
and
2) Add a line white above every MENUTEST's texts (just like [u] but above) How to do it?
What do i'm doing wrong?
navbar.php
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-faded fixed-top" style="background-color: #083F2C;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" height="60" width="160"></a>
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">MENUTEST</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<!-- <a class="dropdown-item" href="#">Ana Tereza fala em São Paulo sobre o Direito de Regresso no Fomento Comercial</a> -->
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENUTEST</a>
</li>
</ul>
</div>
</nav>
</header>
And navbar.css
/* MENUTEST */
.nav-link a {
font-color: white;
}
/* SUBMENUTEST */
.dropdown-menu {
background: #EDEFF1;
height: auto;
width: auto;
padding-left: 5px;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.dropdown-menu a {
color: #78828D;
font-size: 15px;
}
...............................................
font-color is not a css property. You'll want to use color.
.nav-link a {
// font-color: white;
color: white;
}
Try and take a little further than just the class and try -> li, a, .nav-link and then whatever css you want.
I can see you are using Bootstrap so it might be inheriting something. A trick I always use it to go to the Chrome browser and right click on the thing I want to change and click on "inspect" this will make it possible to see what css lies behind the item you want to change and you can then try to edit it in the browser and if it works copy that code and insert into your own css file.
Hope it helps :)
`<div class="menuBar">
<ul>
<li class="selected">HOME</li>
<li>PORTFOLIO</li>
....
</ul>
</div>
// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; }
// more general CSS
li.selected a { color: #FF0000; }`
How about this, have you tried using li.selcted a{color:#FF0000;}.
I am using bootstrap v-4 beta2 and I want to create sticky top menu with submenu. Everything is working on desktop but when on mobile when I click to open submenu I cant see whole submenu and when I am scrolling with whole website but not menu. I found out I have to do something with li.dropdown - when I added position absolute it got a bit messy but I saw the menu. But I cant get what I should do. Here is the code:
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-md-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
Also when on desktop when I hover on the "dropdown" it gets shown but by the time I get the mouse on the submenu it disapears. Should I move the submenu with margin-top: -10px or smh like that? Or is there any solution?
Edit
The main thing is the submenu is greater than viewport and then I simply cant scroll on that
If you need your sub-menu want to scroll inside the content, for that you need to specify the max-height and overflow: scroll;.
You also need to change col-md-3 to col-lg-3 inside the dropdown-menu multi-columns division.
CSS
#media (max-width: 991px){
.multi-columns{
max-height: 300px;
overflow: auto;
}
}
Demo Snippet:
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
#media (max-width: 991px){
.multi-columns{
max-height: 300px;
overflow: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-lg-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
Hope this may help you. Codepen demo link.
Thanks.
Please see the following solution:
https://jsfiddle.net/ard5rg6f/1/
I have used few lines of jQuery to add class to sticky div when menu opens.
$(document).ready(function() {
$('#navbarNav').on('shown.bs.collapse', function () {
$('.nav-wrapper.sticky-top').addClass('menu-opened');
});
$('#navbarNav').on('hidden.bs.collapse', function () {
$('.nav-wrapper.sticky-top').removeClass('menu-opened');
});
});
and removed position absolute property of dropdown menu and added scroll to sticky div.
.nav-wrapper.sticky-top {
position: fixed;
}
.nav-wrapper.sticky-top.menu-opened {
overflow: scroll;
height: 100vh;
}
.dropdown-menu {
display: block;
position: inherit;
}
If you're wanting the nav burger button to 'stick' on the site when you scroll, you will need to position it as fixed.
Edit: I forgot the submenu but in chrome devtools enabling mobile mode, this works fine. Clicking the submenu opens up the menu and then clicking on it again, closes it.
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
.body {
height: 1000px;
}
.nav-wrapper.sticky-top {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="body">
<div class="container">
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-md-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
</div>
</div>