Jag ha börjat koda lite på min navbar på min hemsida. Ha fixat att menyn står fast i allt, allt se bra ut. Ha testat i flera webläsare och la lagt kod för olika webläsare.
Min problem är när man kommer i de mobila delen, när man scrollar ner botten av sidan och vill trycka på den mobila menyn, så försvinner de och då måste man alltid scrolla sig uppåt för komma till menyn. Och de tycker jag de är irriterande. Kan vara javascriptet som är felet.
Här är css koden för navbaren:
Och är den javascriptet jag hittade på nätet:
Vad kan vara felet då?
Min problem är när man kommer i de mobila delen, när man scrollar ner botten av sidan och vill trycka på den mobila menyn, så försvinner de och då måste man alltid scrolla sig uppåt för komma till menyn. Och de tycker jag de är irriterande. Kan vara javascriptet som är felet.
Här är css koden för navbaren:
li {
float: left;
border-right:0px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 19px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #112;
}
.active {
background-color: #990000;
}
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: #333;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: 'Dosis', sans-serif;
}
ul.topnav li a:hover {background-color: #990000;}
ul.topnav li active {
background-color: #990000;
}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
float: left;
border-right:0px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 19px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #112;
}
.active {
background-color: #990000;
}
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: #333;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: 'Dosis', sans-serif;
}
ul.topnav li a:hover {background-color: #990000;}
ul.topnav li active {
background-color: #990000;
}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
Och är den javascriptet jag hittade på nätet:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
Vad kan vara felet då?