xxxxxxxxxx1
<!-- Navbar -->2
<!-- Container wrapper -->3
<div class="container-fluid">4
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">5
<!-- Toggle button -->6
<div class="navbar-toggler hamburger ms-auto py-0" role="button" aria-expanded="false" aria-label="Toggle navigation">7
<svg class="hamburger-icon" data-mdb-toggle="collapse" data-mdb-target="#navbarCenteredExample" id="icon" viewBox="0 0 800 600">8
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top">9
</path>10
<path d="M300,320 L540,320" id="middle"></path>11
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318)"></path>12
</svg>13
</div>14
<div class="container-lg d-block d-lg-flex justify-content-center">15
<div class="row">16
<div class="col-12 d-flex justify-content-center mt-lg-3 mb-0 pb-0">17
<a class="navbar-brand text-center" href="#"18
><img19
id="MDB-logo"20
src="https://i.postimg.cc/wxsWm6Pz/Dru-tvo-Henosis-white-logo1.png"21
alt="MDB Logo"22
loading="lazy"23
alt="MDB Logo"24
draggable="false"25
height="60"26
/></a>27
</div>28
<p class="text-white text-center small pt-0 mt-0">29
Za svobodo v tukaj in zdaj30
</p>31
<!-- Collapsible wrapper -->32
<div class="collapse navbar-collapse justify-content-center" id="navbarCenteredExample">33
<!-- Left links -->34
<ul class="navbar-nav mb-2 mb-lg-0">35
<li class="nav-item">36
<a class="nav-link active" aria-current="page" href="index">37
Domov</a>38
<div class="dropdown-divider my-divider-1 d-lg-none"></div>39
</li>40
<!-- Dropdown -->41
<li class="nav-item dropdown">42
<a class="nav-link dropdown-toggle" href="#" data-mdb-toggle="dropdown" data-mdb-auto-close="outside" data-mdb-dropdown-animation="off" id="navbarDropdownMenuLink1">Regresoterapija</a>43
<div class="dropdown-divider my-divider-1 d-lg-none"></div>44
<ul class="dropdown-menu shadow dropdown-menu-fullwidth">45
<li class="dropend">46
<a href="#" class="dropdown-item mt-2 dropdown-toggle" data-mdb-toggle="dropdown" data-mdb-auto-close="outside" data-mdb-dropdown-animation="off">Regresija</a>47
<ul class="dropdown-menu shadow">48
<li>49
<a class="dropdown-item mt-2" href="regresija">Regresija</a>50
</li>51
52
<li class="dropdown-divider my-divider-1"></li>53
<li>54
<a class="dropdown-item mb-2" href="kako-poteka-regresija">Kako poteka55
regresija</a>56
</li>57
</ul>58
</li>59
<li class="dropdown-divider my-divider-1"></li>60
<!-- ./Dropdown -->61
<!-- Dropdown -->62
<li class="dropend">63
<a href="#" class="dropdown-item dropdown-toggle" data-mdb-toggle="dropdown" data-mdb-auto-close="outside" data-mdb-dropdown-animation="off">Regresija v prejšnja64
življenja</a>65
<ul class="dropdown-menu shadow">66
<li>67
<a class="dropdown-item mt-2" href="regresija-v-prejsnja-zivljenja">Regresija v68
prejšnja69
življenja</a>70
</li>71
<li class="dropdown-divider my-divider-1"></li>72
<li>73
<a class="dropdown-item" href="ali-so-prejsnja-zivljenja-resnicna">Ali so74
prejšnja75
življenja76
resnična</a>77
</li>78
<li class="dropdown-divider my-divider-1"></li>79
<li>80
<a class="dropdown-item mb-2" href="kaksen-ucinek-ima-lahko-taka-seansa">Kakšen81
učinek ima lahko82
taka seansa</a>83
</li>84
</ul>85
</li>86
<li class="dropdown-divider my-divider-1"></li>87
<li>88
<a class="dropdown-item" href="regresija-sedanjega-zivljenja">Regresija sedanjega89
življenja</a>90
</li>91
<li class="dropdown-divider my-divider-1"></li>92
<li>93
<a class="dropdown-item mb-2" href="zivljenje-med-zivljenji">Regresija v življenje med94
življenji</a>95
</li>96
</ul>97
</li>98
<!-- ./Dropdown -->99
<li class="nav-item">100
<a class="nav-link" href="progresija">Progresija</a>101
<div class="dropdown-divider my-divider-1 d-lg-none"></div>102
</li>103
<!-- Dropdown -->104
<li class="nav-item dropdown">105
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button" data-mdb-toggle="dropdown" aria-expanded="false">106
Hipnoterapija107
</a>108
<div class="dropdown-divider my-divider-1 d-lg-none"></div>109
<ul class="dropdown-menu shadow">110
<li>111
<a class="dropdown-item mt-2" href="hipnoza">Hipnoza</a>112
</li>113
<li class="dropdown-divider my-divider-1"></li>114
<li>115
<a class="dropdown-item" href="fobije">Fobije</a>116
</li>117
<li class="dropdown-divider my-divider-1"></li>118
<li>119
<a class="dropdown-item" href="kajenje">Kajenje</a>120
</li>121
<li class="dropdown-divider my-divider-1"></li>122
<li>123
<a class="dropdown-item" href="reprogramiranje-caker">Reprogramiranje čaker</a>124
</li>125
<li class="dropdown-divider my-divider-1"></li>126
<li>127
<a class="dropdown-item mb-2" href="nespecnost">Nespečnost</a>128
</li>129
<li class="dropdown-divider my-divider-1"></li>130
<li>131
<a class="dropdown-item mb-2" href="telesna-teza">Telesna teža</a>132
</li>133
</ul>134
</li>135
<!-- ./Dropdown -->136
<!-- Dropdown -->137
<li class="nav-item dropdown">138
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-mdb-toggle="dropdown" aria-expanded="false">139
Ujete duše140
</a>141
<div class="dropdown-divider my-divider-1 d-lg-none"></div>142
<ul class="dropdown-menu shadow">143
<li>144
<a class="dropdown-item mt-2" href="ujete-duse">Ujete duše</a>145
</li>146
<li class="dropdown-divider my-divider-1"></li>147
<li>148
<a class="dropdown-item mb-2" href="kako-je-mogoce-odstraniti-ujete-duse">Odstranjevanje149
ujetih duš</a>150
</li>151
</ul>152
</li>153
<li class="nav-item">154
<a class="nav-link" href="mnenja-in-vtisi">Mnenja in vtisi</a>155
<div class="dropdown-divider my-divider-1 d-lg-none"></div>156
</li>157
<!-- Dropdown -->158
<li class="nav-item dropdown">159
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink4" role="button" data-mdb-toggle="dropdown" aria-expanded="false">160
O meni161
</a>162
<div class="dropdown-divider my-divider-1 d-lg-none"></div>163
<ul class="dropdown-menu shadow">164
<li>165
<a class="dropdown-item mt-2" href="o-meni">O meni</a>166
</li>167
<li class="dropdown-divider my-divider-1"></li>168
<li>169
<a class="dropdown-item mb-2" href="mediji">Mediji</a>170
</li>171
</ul>172
</li>173
<!-- ./Dropdown -->174
<li class="nav-item">175
<a class="nav-link" href="kontakt">Kontakt</a>176
<div class="dropdown-divider my-divider-1 d-lg-none"></div>177
</li>178
<li class="nav-item">179
<a class="nav-link" href="delavnice">Dogodki</a>180
<div class="dropdown-divider my-divider-1 d-lg-none"></div>181
</li>182
<li class="nav-item">183
<a class="nav-link" href="blog">Blog</a>184
<div class="dropdown-divider my-divider-1 d-lg-none"></div>185
</li>186
</ul>187
<!-- Left links -->188
</div>189
<!-- Collapsible wrapper -->190
</div>191
<!-- Container wrapper -->192
<!-- Navbar -->193
194
195
196
xxxxxxxxxx1
.navbar {2
background-color: #1146a2;3
background: -moz-radial-gradient(center,4
ellipse cover,5
#1864e7 0%,6
#1146a2 100%);7
background: -webkit-radial-gradient(center,8
ellipse cover,9
#1864e7 0%,10
#1146a2 100%);11
background: -webkit-gradient(radial,12
center center,13
0px,14
center center,15
100%,16
color-stop(0%, #1864e7),17
color-stop(100%, #1146a2));18
background: -o-radial-gradient(center,19
ellipse cover,20
#1864e7 0%,21
#1146a2 100%);22
background: -ms-radial-gradient(center,23
ellipse cover,24
#1864e7 0%,25
#1146a2 100%);26
background: radial-gradient(ellipse at center, #1864e79 0%, #1146a2 100%);27
}28
29
.navbar-text {30
color: #c2d2e0;31
}32
33
.navbar-text a {34
color: #ffffff;35
}36
37
.navbar-text a:hover,38
.navbar-text a:focus {39
color: #c2d2e0;40
}41
42
.navbar-nav .nav-link {43
color: #c2d2e0;44
border-radius: 0.25rem;45
margin: 0 0.25em;46
}47
48
.navbar-nav .nav-link:not(.disabled):hover,49
.navbar-nav .nav-link:not(.disabled):focus {50
color: #ffffff;51
}52
53
.navbar-nav .dropdown-menu {54
border-color: #76abd9;55
background-color: #1146a2;56
background: -moz-radial-gradient(center,57
ellipse cover,58
#1864e7 0%,59
#1146a2 100%);60
background: -webkit-radial-gradient(center,61
ellipse cover,62
#1864e7 0%,63
#1146a2 100%);64
background: -webkit-gradient(radial,65
center center,66
0px,67
center center,68
100%,69
color-stop(0%, #1864e7),70
color-stop(100%, #1146a2));71
background: -o-radial-gradient(center,72
ellipse cover,73
#1864e7 0%,74
#1146a2 100%);75
background: -ms-radial-gradient(center,76
ellipse cover,77
#1864e7 0%,78
#1146a2 100%);79
background: radial-gradient(ellipse at center, #1864e79 0%, #1146a2 100%);80
}81
82
.navbar-nav .dropdown-item:hover,83
.navbar-nav .dropdown-item:focus,84
.navbar-nav .dropdown-item.active {85
color: #ffffff;86
background: rgba(76, 175, 80, 0);87
}88
89
.navbar-nav .dropdown-item {90
color: #c2d2e0;91
}92
93
.navbar-nav .dropdown-divider {94
border-top-color: #c2d2e0;95
}96
97
.nav-item.active .nav-link {98
color: #ffffff;99
}100
101
.nav-item.active .nav-link:hover,102
.nav-item.active .nav-link:focus {103
color: #ffffff;104
}105
106
.nav-item.show .nav-link {107
color: #ffffff;108
}109
110
.nav-item.show .nav-link:hover,111
.nav-item.show .nav-link:focus {112
color: #ffffff;113
}114
115
.navbar-toggle {116
border-color: #428bca;117
}118
119
.navbar-toggle:hover,120
.navbar-toggle:focus {121
background-color: #428bca;122
}123
124
.navbar-toggle .navbar-toggler-icon {125
color: #c2d2e0;126
}127
128
.navbar-collapse,129
.navbar-form {130
border-color: #c2d2e0;131
}132
133
.navbar-link {134
color: #c2d2e0;135
}136
137
.header-bord.t {138
border-bottom: thin solid #76abd9;139
}140
141
.navbar .navbar-link:hover {142
color: #ffffff;143
background-color: #3977ac;144
}145
146
.navbar-dark .navbar-toggler {147
border: 0px black solid;148
}149
150
.dropdown-divider {151
border-top: 1px solid #c2d2e0;152
border-top-color: rgb(245, 245, 245);153
opacity: 1;154
}155
156
157
.navbar .navbar-nav .nav-item {158
position: relative;159
}160
161
.navbar .navbar-nav .nav-item::after {162
position: absolute;163
bottom: 0;164
left: 0;165
right: 0;166
margin-top: 0.5rem;167
margin-bottom: 0.5rem;168
background-color: #fff;169
width: 0%;170
content: "";171
height: 1.5px;172
-webkit-transition: all ease 0.6s;173
-moz-transition: all ease 0.6s;174
transition: all ease 0.6s;175
transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);176
}177
178
@media (max-width: 991.98px) {179
.navbar .navbar-nav .nav-item::after {180
margin-left: auto;181
margin-right: auto;182
}183
}184
185
@media (min-width: 992px) {186
.navbar .navbar-nav .nav-item::after {187
top: 65%;188
}189
}190
191
.navbar .navbar-nav .nav-item:hover::after {192
width: 100%;193
}194
195
196
197
/* CSS za centriranje logotipa */198
.navbar {199
flex-direction: column;200
}201
.navbar-brand {202
margin-bottom: 10px; /* Razmak med logotipom in navigacijo */203
}204
.dropdown-menu li {205
position: relative;206
}207
208
.dropdown-menu .dropdown-submenu {209
position: absolute !important;210
left: 100%;211
top: 0;212
border: 1px solid;213
border-color: #c2d2e0;214
}215
216
.dropdown-menu {217
position: absolute !important;218
left: 100%;219
margin-left: 0 !important;220
top: 0;221
border: 1px solid;222
border-color: #c2d2e0;223
background-color: rgb(10, 69, 163, 0.9);224
}225
226
.dropdown-menu .dropdown-toggle {227
padding: 0.25rem 1.1rem !important;228
}229
230
@media screen and (max-width: 767px) {231
.dropdown-menu .dropdown-submenu {232
position: static !important;233
}234
}235
236
.dropdown-toggle[aria-expanded="true"]:after {237
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);238
-webkit-transform: rotate(180deg);239
-moz-transform: rotate(180deg);240
-o-transform: rotate(180deg);241
-ms-transform: rotate(180deg);242
transform: rotate(180deg);243
}244
245
/*for the animation*/246
.dropdown-toggle:after {247
-webkit-transition: 0.5s;248
-moz-transition: 0.5s;249
-o-transition: 0.5s;250
-ms-transition: 0.5s;251
transition: 0.5s;252
}253
254
.dropdown-toggle.active-dropdown::after {255
transform: rotate(-90deg);256
}257
258
.dropdown-toggle[aria-expanded="true"]:after {259
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);260
-webkit-transform: rotate(180deg);261
-moz-transform: rotate(180deg);262
-o-transform: rotate(180deg);263
-ms-transform: rotate(180deg);264
transform: rotate(180deg);265
}266
267
.dropdown-toggle:after {268
-webkit-transition: 0.5s;269
-moz-transition: 0.5s;270
-o-transition: 0.5s;271
-ms-transition: 0.5s;272
transition: 0.5s;273
}274
275
.dropdown-submenu .dropdown-menu {276
top: 0;277
left: 100%;278
margin-left: 0.1rem;279
margin-right: 0.1rem;280
}281
#icon {282
width: 60px;283
height: 50px;284
cursor: pointer;285
transform: translate3d(0, 0, 0);286
}287
288
.hamburger-icon path {289
fill: none;290
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25),291
stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);292
stroke-width: 30px;293
stroke-linecap: round;294
stroke: #c2d2e0;295
stroke-dashoffset: 0px;296
}297
298
.hamburger-icon path#top,299
.hamburger-icon path#bottom {300
stroke-dasharray: 240px 950px;301
}302
303
.hamburger-icon path#middle {304
stroke-dasharray: 240px 240px;305
}306
307
.cross path#top,308
.cross path#bottom {309
stroke-dashoffset: -650px;310
stroke-dashoffset: -650px;311
}312
313
.cross path#middle {314
stroke-dashoffset: -115px;315
stroke-dasharray: 1px 220px;316
}317
318
@media (min-width: 575px) and (max-width: 991.98px) {319
.navbar {320
padding-top: 0px;321
}322
}323
324
@media (max-width: 575px) {325
.navbar {326
padding-top: 0px;327
}328
}329
330
331
xxxxxxxxxx1
/* jshint esversion: 6 */2
// Hamburger menu icon3
const el = document.querySelector('.hamburger');4
5
el.onclick = function () {6
el.classList.toggle('cross');7
};8
9
10
11
12
Console errors: 0