xxxxxxxxxx
1
2
<nav class="navbar navbar-expand-lg navbar-dark blue fixed-top">
3
4
<a class="navbar-brand" href="#"> Test</a>
5
6
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
7
aria-expanded="false" aria-label="Toggle navigation">
8
<span class="navbar-toggler-icon"></span>
9
</button>
10
11
<div class="collapse navbar-collapse force-scroll" id="navbarText">
12
13
<ul class="navbar-nav ml-auto nav-flex-icons mr-5">
14
15
<li class="nav-item">
16
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>1</a>
17
</li>
18
19
<li class="nav-item">
20
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>1</a>
21
</li>
22
23
<li class="nav-item">
24
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>1</a>
25
</li>
26
27
28
<li class="nav-item">
29
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>1</a>
30
</li>
31
32
33
<li class="nav-item">
34
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>1</a>
35
</li>
36
37
38
39
<li class="nav-item">
40
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>2</a>
41
</li>
42
43
<li class="nav-item">
44
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>3</a>
45
</li>
46
47
<li class="nav-item">
48
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>3</a>
49
</li>
50
51
<li class="nav-item">
52
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>3</a>
53
</li>
54
55
<li class="nav-item last mr-2">
56
<a class="nav-link" href="#"> <i class="fas fa-school" style="font-size:30px;color:white;"></i><br>4</a>
57
58
</li>
59
60
61
62
63
<li class="nav-item dropdown mx-4 pr-1">
64
<a class="nav-link" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
65
aria-expanded="false">
66
<i class="fas fa-ellipsis-h" style="font-size:30px;color:white;"></i><br>Mehr </a>
67
</a>
68
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
69
<a class="dropdown-item" href="#"><i class="fas fa-folder" style="font-size:20px;color:black;"></i> test
70
</a></a>
71
<a class="dropdown-item" href="#"><i class="fas fa-star" style="font-size:20px;color:black;"></i> test</a>
72
</div>
73
</li>
74
</ul>
75
76
77
</div>
78
</nav>
79
<br><br><br><br>
80
<br><br><br><br>
81
<br><br><br><br>
82
<br><br><br><br>
83
<br><br><br><br>
84
<br><br><br><br>
85
<br><br><br><br>
86
87
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
88
crossorigin="anonymous">
89
xxxxxxxxxx
1
.force-scroll {
2
overflow-y: scroll;
3
overflow-x: inherit;
4
}
5
.dropdown{
6
position: absolute;
7
z-index: 1330;
8
right: 0;
9
}
10
11
.dropdown-menu{
12
position: relative;
13
top:60px !important;
14
left: -100px !important;
15
}
16
.last{
17
margin-right:30px;
18
}
19
20
@media (max-width: 800px){
21
.dropdown{
22
display: flex;
23
left: 40%;
24
top: 10px;
25
}
26
}
1
1
Console errors: 0