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 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-3">17
<a class="navbar-brand text-center" href="#"18
><img19
id="MDB-logo"20
src="https://i.ibb.co/jHcC2WD/Untitled-1.png"21
alt="MDB Logo"22
loading="lazy"23
alt="MDB Logo"24
draggable="false"25
height="60"26
/></a>27
</div>28
<!-- Collapsible wrapper -->29
<div class="collapse navbar-collapse justify-content-start" id="navbarCenteredExample">30
<!-- Left links -->31
<ul class="navbar-nav mb-2 mb-lg-0">32
<li class="nav-item">33
<a class="nav-link active" aria-current="page" href="index">34
Domov</a>35
<div class="dropdown-divider my-divider-1 d-lg-none"></div>36
</li>37
<!-- Dropdown -->38
<li class="nav-item dropdown">39
<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>40
<div class="dropdown-divider my-divider-1 d-lg-none"></div>41
<ul class="dropdown-menu shadow dropdown-menu-fullwidth">42
<li class="dropend">43
<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>44
<ul class="dropdown-menu shadow">45
<li>46
<a class="dropdown-item mt-2" href="regresija">Regresija</a>47
</li>48
49
<li class="dropdown-divider my-divider-1"></li>50
<li>51
<a class="dropdown-item mb-2" href="kako-poteka-regresija">Kako poteka52
regresija</a>53
</li>54
</ul>55
</li>56
<li class="dropdown-divider my-divider-1"></li>57
<!-- ./Dropdown -->58
<!-- Dropdown -->59
<li class="dropend">60
<a href="#" class="dropdown-item dropdown-toggle" data-mdb-toggle="dropdown" data-mdb-auto-close="outside" data-mdb-dropdown-animation="off">Regresija v prejšnja61
življenja</a>62
<ul class="dropdown-menu shadow">63
<li>64
<a class="dropdown-item mt-2" href="regresija-v-prejsnja-zivljenja">Regresija v65
prejšnja66
življenja</a>67
</li>68
<li class="dropdown-divider my-divider-1"></li>69
<li>70
<a class="dropdown-item" href="ali-so-prejsnja-zivljenja-resnicna">Ali so71
prejšnja72
življenja73
resnična</a>74
</li>75
<li class="dropdown-divider my-divider-1"></li>76
<li>77
<a class="dropdown-item mb-2" href="kaksen-ucinek-ima-lahko-taka-seansa">Kakšen78
učinek ima lahko79
taka seansa</a>80
</li>81
</ul>82
</li>83
<li class="dropdown-divider my-divider-1"></li>84
<li>85
<a class="dropdown-item" href="regresija-sedanjega-zivljenja">Regresija sedanjega86
življenja</a>87
</li>88
<li class="dropdown-divider my-divider-1"></li>89
<li>90
<a class="dropdown-item mb-2" href="zivljenje-med-zivljenji">Regresija v življenje med91
življenji</a>92
</li>93
</ul>94
</li>95
<!-- ./Dropdown -->96
<li class="nav-item">97
<a class="nav-link" href="progresija">Progresija</a>98
<div class="dropdown-divider my-divider-1 d-lg-none"></div>99
</li>100
<!-- Dropdown -->101
<li class="nav-item dropdown">102
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button" data-mdb-toggle="dropdown" aria-expanded="false">103
Hipnoterapija104
</a>105
<div class="dropdown-divider my-divider-1 d-lg-none"></div>106
<ul class="dropdown-menu shadow">107
<li>108
<a class="dropdown-item mt-2" href="hipnoza">Hipnoza</a>109
</li>110
<li class="dropdown-divider my-divider-1"></li>111
<li>112
<a class="dropdown-item" href="fobije">Fobije</a>113
</li>114
<li class="dropdown-divider my-divider-1"></li>115
<li>116
<a class="dropdown-item" href="kajenje">Kajenje</a>117
</li>118
<li class="dropdown-divider my-divider-1"></li>119
<li>120
<a class="dropdown-item" href="reprogramiranje-caker">Reprogramiranje čaker</a>121
</li>122
<li class="dropdown-divider my-divider-1"></li>123
<li>124
<a class="dropdown-item mb-2" href="nespecnost">Nespečnost</a>125
</li>126
<li class="dropdown-divider my-divider-1"></li>127
<li>128
<a class="dropdown-item mb-2" href="telesna-teza">Telesna teža</a>129
</li>130
</ul>131
</li>132
<!-- ./Dropdown -->133
<!-- Dropdown -->134
<li class="nav-item dropdown">135
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-mdb-toggle="dropdown" aria-expanded="false">136
Ujete duše137
</a>138
<div class="dropdown-divider my-divider-1 d-lg-none"></div>139
<ul class="dropdown-menu shadow">140
<li>141
<a class="dropdown-item mt-2" href="ujete-duse">Ujete duše</a>142
</li>143
<li class="dropdown-divider my-divider-1"></li>144
<li>145
<a class="dropdown-item mb-2" href="kako-je-mogoce-odstraniti-ujete-duse">Odstranjevanje146
ujetih duš</a>147
</li>148
</ul>149
</li>150
<li class="nav-item">151
<a class="nav-link" href="mnenja-in-vtisi">Mnenja in vtisi</a>152
<div class="dropdown-divider my-divider-1 d-lg-none"></div>153
</li>154
<!-- Dropdown -->155
<li class="nav-item dropdown">156
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink4" role="button" data-mdb-toggle="dropdown" aria-expanded="false">157
O meni158
</a>159
<div class="dropdown-divider my-divider-1 d-lg-none"></div>160
<ul class="dropdown-menu shadow">161
<li>162
<a class="dropdown-item mt-2" href="o-meni">O meni</a>163
</li>164
<li class="dropdown-divider my-divider-1"></li>165
<li>166
<a class="dropdown-item mb-2" href="mediji">Mediji</a>167
</li>168
</ul>169
</li>170
<!-- ./Dropdown -->171
<li class="nav-item">172
<a class="nav-link" href="kontakt">Kontakt</a>173
<div class="dropdown-divider my-divider-1 d-lg-none"></div>174
</li>175
<li class="nav-item">176
<a class="nav-link" href="delavnice">Dogodki</a>177
<div class="dropdown-divider my-divider-1 d-lg-none"></div>178
</li>179
<li class="nav-item">180
<a class="nav-link" href="blog">Blog</a>181
<div class="dropdown-divider my-divider-1 d-lg-none"></div>182
</li>183
</ul>184
<!-- Left links -->185
</div>186
<!-- Collapsible wrapper -->187
</div>188
<!-- Container wrapper -->189
<!-- Navbar -->190
191
192
193
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
.background-radial-gradient {30
background-color: rgb(10, 69, 163, 0.9);31
}32
.navbar-light .navbar-nav .nav-link {33
color: #000;34
}35
/* CSS za centriranje logotipa */36
.navbar {37
flex-direction: column;38
}39
.navbar-brand {40
margin-bottom: 10px; /* Razmak med logotipom in navigacijo */41
}42
.dropdown-menu li {43
position: relative;44
}45
46
.dropdown-menu .dropdown-submenu {47
position: absolute !important;48
left: 100%;49
top: 0;50
border: 1px solid;51
border-color: #c2d2e0;52
}53
54
.dropdown-menu {55
position: absolute !important;56
left: 100%;57
margin-left: 0 !important;58
top: 0;59
border: 1px solid;60
border-color: #c2d2e0;61
background-color: rgb(10, 69, 163, 0.9);62
}63
64
.dropdown-menu .dropdown-toggle {65
padding: 0.25rem 1.1rem !important;66
}67
68
@media screen and (max-width: 767px) {69
.dropdown-menu .dropdown-submenu {70
position: static !important;71
}72
}73
74
.dropdown-toggle[aria-expanded="true"]:after {75
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);76
-webkit-transform: rotate(180deg);77
-moz-transform: rotate(180deg);78
-o-transform: rotate(180deg);79
-ms-transform: rotate(180deg);80
transform: rotate(180deg);81
}82
83
/*for the animation*/84
.dropdown-toggle:after {85
-webkit-transition: 0.5s;86
-moz-transition: 0.5s;87
-o-transition: 0.5s;88
-ms-transition: 0.5s;89
transition: 0.5s;90
}91
92
.dropdown-toggle.active-dropdown::after {93
transform: rotate(-90deg);94
}95
96
.dropdown-toggle[aria-expanded="true"]:after {97
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);98
-webkit-transform: rotate(180deg);99
-moz-transform: rotate(180deg);100
-o-transform: rotate(180deg);101
-ms-transform: rotate(180deg);102
transform: rotate(180deg);103
}104
105
.dropdown-toggle:after {106
-webkit-transition: 0.5s;107
-moz-transition: 0.5s;108
-o-transition: 0.5s;109
-ms-transition: 0.5s;110
transition: 0.5s;111
}112
113
.dropdown-submenu .dropdown-menu {114
top: 0;115
left: 100%;116
margin-left: 0.1rem;117
margin-right: 0.1rem;118
}119
#icon {120
width: 60px;121
height: 50px;122
cursor: pointer;123
transform: translate3d(0, 0, 0);124
}125
126
.hamburger-icon path {127
fill: none;128
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25),129
stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);130
stroke-width: 30px;131
stroke-linecap: round;132
stroke: #c2d2e0;133
stroke-dashoffset: 0px;134
}135
136
.hamburger-icon path#top,137
.hamburger-icon path#bottom {138
stroke-dasharray: 240px 950px;139
}140
141
.hamburger-icon path#middle {142
stroke-dasharray: 240px 240px;143
}144
145
.cross path#top,146
.cross path#bottom {147
stroke-dashoffset: -650px;148
stroke-dashoffset: -650px;149
}150
151
.cross path#middle {152
stroke-dashoffset: -115px;153
stroke-dasharray: 1px 220px;154
}155
156
@media (min-width: 575px) and (max-width: 991.98px) {157
.navbar {158
padding-top: 0px;159
}160
}161
162
@media (max-width: 575px) {163
.navbar {164
padding-top: 0px;165
}166
}167
168
169
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