xxxxxxxxxx1
<!-- Container for demo purpose -->2
<div class="container my-5 py-5">3
<div class="header-background">4
<div class="container-xl">5
<div class="pt-2 pt-lg-3 d-flex flex-row flex-wrap flex-lg-nowrap">6
<a href="#" class="navbar-brand px-2 order-1">7
<img id="header-logo" src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.png">8
</a>9
<form class="d-flex input-group my-2 my-lg-auto mx-lg-2 order-3 order-lg-3 input-group">10
<input autocomplete="off" type="search" class="form-control rounded" placeholder="Search">11
<button type="button" class="btn btn-outline-primary">search</button>12
</form>13
<ul class="navbar-nav ms-auto d-flex flex-row justify-content-end align-items-center order-2 order-lg-3">14
<li class="nav-item text-center mx-2">15
<a href="https://zazen-nudu.3/index.php?route=account/login" class="btn btn-primary">16
<i class="fas fa-user fa-lg"></i>17
</a>18
</li>19
<li class="nav-item text-center mx-2 d-lg-none">20
<a href="#main-menu-wrapper" class="btn btn-primary" data-mdb-toggle="collapse" role="button" aria-expanded="true" aria-label="Toggle navigation" style="">21
<i class="fas fa-bars fa-lg"></i>22
</a>23
</li>24
<li class="nav-item text-center mx-2">25
<a href="https://zazen-nudu.3/index.php?route=checkout/cart" class="nav-link d-flex flex-row align-items-center">26
<div>27
<i class="fas fa-shopping-cart fa-2x"></i>28
<span id="cart-badge-count" class="badge rounded-pill badge-notification bg-dark"></span> 29
</div>30
<span id="cart-text" class="small d-none d-sm-inline ms-2">Košík</span>31
</a>32
</li>33
</ul>34
</div>35
<div id="main-menu-wrapper" class="d-lg-block collapse show" style="">36
<nav>37
<ul id="main-menu" class="nav flex-column flex-lg-row ">38
<li class="nav-item flex-lg-fill dropdown">39
<a class="nav-link dropdown-toggle show" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="true">40
Desktops41
</a>42
<div class="dropdown-menu w-100 mt-0 show" style="border-top-left-radius: 0; border-top-right-radius: 0;" data-popper-placement="null" data-mdb-popper="static">43
<div class="row my-4">44
<div class="col-6 col-lg-3">45
<div class="list-group list-group-flush">46
<a href="https://zazen-nudu.3/desktops/pc" class="list-group-item list-group-item-action">PC (0)</a>47
<a href="https://zazen-nudu.3/desktops/mac" class="list-group-item list-group-item-action">Mac (1)</a>48
</div>49
</div>50
</div> 51
</div>52
</li>53
<li class="nav-item flex-lg-fill dropdown">54
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">55
Laptops & Notebooks56
</a>57
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">58
<div class="row my-4">59
<div class="col-6 col-lg-3">60
<div class="list-group list-group-flush">61
<a href="https://zazen-nudu.3/laptop-notebook/macs" class="list-group-item list-group-item-action">Macs (0)</a>62
<a href="https://zazen-nudu.3/laptop-notebook/windows" class="list-group-item list-group-item-action">Windows (0)</a>63
</div>64
</div>65
</div> 66
</div>67
</li>68
<li class="nav-item flex-lg-fill dropdown">69
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">70
Components71
</a>72
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">73
<div class="row my-4">74
<div class="col-6 col-lg-3">75
<div class="list-group list-group-flush">76
<a href="https://zazen-nudu.3/component/mouse" class="list-group-item list-group-item-action">Mice and Trackballs (0)</a>77
<a href="https://zazen-nudu.3/component/monitor" class="list-group-item list-group-item-action">Monitors (2)</a>78
<a href="https://zazen-nudu.3/component/printer" class="list-group-item list-group-item-action">Printers (0)</a>79
<a href="https://zazen-nudu.3/component/scanner" class="list-group-item list-group-item-action">Scanners (0)</a>80
</div>81
</div>82
<div class="col-6 col-lg-3">83
<div class="list-group list-group-flush">84
<a href="https://zazen-nudu.3/component/web-camera" class="list-group-item list-group-item-action">Web Cameras (0)</a>85
</div>86
</div>87
</div> 88
</div>89
</li>90
<li class="nav-item flex-lg-fill dropdown">91
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">92
Tablets93
</a>94
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">95
<div class="row my-4">96
</div> 97
</div>98
</li>99
<li class="nav-item flex-lg-fill dropdown">100
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">101
Software102
</a>103
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">104
<div class="row my-4">105
</div> 106
</div>107
</li>108
<li class="nav-item flex-lg-fill dropdown">109
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">110
Phones & PDAs111
</a>112
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">113
<div class="row my-4">114
</div> 115
</div>116
</li>117
<li class="nav-item flex-lg-fill dropdown">118
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">119
Cameras120
</a>121
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">122
<div class="row my-4">123
</div> 124
</div>125
</li>126
<li class="nav-item flex-lg-fill dropdown">127
<a class="nav-link dropdown-toggle" href="#" role="button" data-mdb-toggle="dropdown" data-mdb-display="static" aria-expanded="false">128
MP3 Players129
</a>130
<div class="dropdown-menu w-100 mt-0" style="border-top-left-radius: 0; border-top-right-radius: 0;">131
<div class="row my-4">132
<div class="col-6 col-lg-3">133
<div class="list-group list-group-flush">134
<a href="https://zazen-nudu.3/mp3-players/test11" class="list-group-item list-group-item-action">test 11 (0)</a>135
<a href="https://zazen-nudu.3/mp3-players/test12" class="list-group-item list-group-item-action">test 12 (0)</a>136
<a href="https://zazen-nudu.3/mp3-players/test15" class="list-group-item list-group-item-action">test 15 (0)</a>137
<a href="https://zazen-nudu.3/mp3-players/test16" class="list-group-item list-group-item-action">test 16 (0)</a>138
</div>139
</div>140
<div class="col-6 col-lg-3">141
<div class="list-group list-group-flush">142
<a href="https://zazen-nudu.3/mp3-players/test17" class="list-group-item list-group-item-action">test 17 (0)</a>143
<a href="https://zazen-nudu.3/mp3-players/test18" class="list-group-item list-group-item-action">test 18 (0)</a>144
<a href="https://zazen-nudu.3/mp3-players/test19" class="list-group-item list-group-item-action">test 19 (0)</a>145
<a href="https://zazen-nudu.3/mp3-players/test20" class="list-group-item list-group-item-action">test 20 (0)</a>146
</div>147
</div>148
<div class="col-6 col-lg-3">149
<div class="list-group list-group-flush">150
<a href="https://zazen-nudu.3/mp3-players/test21" class="list-group-item list-group-item-action">test 21 (0)</a>151
<a href="https://zazen-nudu.3/mp3-players/test22" class="list-group-item list-group-item-action">test 22 (0)</a>152
<a href="https://zazen-nudu.3/mp3-players/test23" class="list-group-item list-group-item-action">test 23 (0)</a>153
<a href="https://zazen-nudu.3/mp3-players/test24" class="list-group-item list-group-item-action">test 24 (0)</a>154
</div>155
</div>156
<div class="col-6 col-lg-3">157
<div class="list-group list-group-flush">158
<a href="https://zazen-nudu.3/mp3-players/test4" class="list-group-item list-group-item-action">test 4 (0)</a>159
<a href="https://zazen-nudu.3/mp3-players/test5" class="list-group-item list-group-item-action">test 5 (0)</a>160
<a href="https://zazen-nudu.3/mp3-players/test6" class="list-group-item list-group-item-action">test 6 (0)</a>161
<a href="https://zazen-nudu.3/mp3-players/test7" class="list-group-item list-group-item-action">test 7 (0)</a>162
</div>163
</div>164
<div class="col-6 col-lg-3">165
<div class="list-group list-group-flush">166
<a href="https://zazen-nudu.3/mp3-players/test8" class="list-group-item list-group-item-action">test 8 (0)</a>167
<a href="https://zazen-nudu.3/mp3-players/test9" class="list-group-item list-group-item-action">test 9 (0)</a>168
</div>169
</div>170
</div> 171
</div>172
</li>173
</ul>174
</nav>175
176
</div>177
</div>178
</div>179
</div>xxxxxxxxxx1
#header-logo {2
max-height: 35px;3
}4
.header-top-line {5
background-color: rgb(0, 26, 73);6
7
}8
.header-background {9
background-color: #c8edff;10
padding-bottom: 1rem;11
position: relative;12
}13
14
.header-background::before, .header-background::after{15
border-bottom: 5px solid #fff;16
}17
.header-background::before{18
content: "";19
position: absolute;20
left: 0;21
right: 0;22
bottom: 0;23
height: 10px;24
background-size: 20px 40px;25
background-image:26
radial-gradient(circle at 10px -15px, transparent 20px, #fff 21px);27
}28
.header-background::after{29
content: "";30
position: absolute;31
left: 0;32
right: 0;33
bottom: 0;34
height: 15px;35
background-size: 40px 40px;36
background-image:37
radial-gradient(circle at 10px 26px, #fff 20px, transparent 21px);38
}39
40
#main-menu .dropdown-menu {41
position: static;42
}43
44
@media (min-width: 576px) {45
#header-logo {46
max-height: 55px;47
} 48
}49
50
@media (min-width: 992px) {51
#main-menu {52
position: relative;53
}54
55
#main-menu .dropdown {56
position: static;57
}58
59
#main-menu .dropdown-menu {60
position: absolute;61
}62
}1
1
Console errors: 0