Weergave menu op website

[toontje]

Ik heb een probleem met de weergave van het hamburger-menu op de smartphone.

De drie streepjes staan links en de tekst 'menu' staat dus rechts.

Het is de bedoeling om tussen die twee wat ruimte te laten maar dat lukt me niet.
De streepjes en 'menu' staan eigenlijk tegen elkaar.

Wat doe ik fout?

(Een deel van) de gebruikte code ziet er zo uit:

#menuknop {
    display: none;
}
@media screen and (max-width: 800px) {
#menuknop {
    border-bottom: 0px solid white;
    color: white;
    display: block;
    height: 16px;
    font-weight: 400;
    padding: 9px 0.3em 9px 0.3em;
    text-align: center;
    text-decoration: none;
}
}
#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.2em 0 0.2;
    position: relative;
}
#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin-top: 3px;
    width: 100%;
    display: block;
}

Dank voor het mee denken.

Titel gewijzigd door RaL (mod) | Vorige titel: website

[igvfer]

@toontje  Vandaag te moe na een ganse dag op stap. Ik bekijk het morgen nog eens. Ik veronderstel dat dit de betreffende CSS is.

[stefangroenen]

Heb je al eens bootstrap geprobeerd, deze heeft dit volledig ingebouwd. Weet niet wat je gebruikt ASP of PHP, maar voor beide is bootstrap ter beschikking. Gewoon even downloaden en bij je site toevoegen. De uitleg en handleiding is ook te vinden. Daar kan je ook je probleem gemakkelijk in oplossen

[igvfer]

@toontjeJe gebruikt  id in plaats van class. id moet uit 1 woord bestaan doe daarom eens de spatie weg tussen #menu-icoon en span, dus zoiets: #menu-icoon-span {

[toontje]

Vooreerst dank voor je reactie.

Helaas is het probleem niet opgelost want de drie streepjes zijn nu helemaal verdwenen.

Welk ander deel van de code zou de oorzaak kunnen zijn?

[igvfer]

@toontje  Ik ben verkeerd met mijn uitleg hier. Toon ons anders eens de html code waaruit je menu bestaat.

[toontje]

Bij deze de code van alles wat enigszins met 'menu' te maken heeft:

#menu {
    background-color: #0033CC;
    width: 100%;
}
#menu:after {
    clear: both;
    content: " ";
    display: table;
}
#menuknop {
    display: none;
}
@media screen and (max-width: 800px) {
#menuknop {
    border-bottom: 0px solid white;
    color: white;
    display: block;
    height: 16px;
    font-weight: 400;
    padding: 9px 0.3em 9px 0.3em;
    text-align: center;
    text-decoration: none;
}
}
#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.2em 0 0.2;
    position: relative;
}
#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin-top: 3px;
    width: 100%;
    display: block;
}
#menu ul {
    list-style-type: none;
    margin: 0.0em auto;
    max-width: 1000px;
    width: 80%;
}
#hoofdmenu {
    display: none;
}
@media screen and (min-width: 801px) {
#hoofdmenu {
    display: block !important;
}
}
@media screen and (max-width: 800px) {
#menu ul {
    width: 100%;
}
}
#hoofdmenu > li {
    float: left;
    position: relative;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li {
    float: none;
}
}
#hoofdmenu > li > a {
    background-color: #0033CC;
    color: white;
    display: block;
    font-size: 1em;
    font-weight: bold;
    padding: 1em 1em 1em 1em;
    text-align: left;
    text-decoration: none;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li > a {
    border-bottom: 1px solid white;
	font-weight: normal;
	padding: 0.6em 0.8em;
}
}
#hoofdmenu > li > a:hover {
    background-color: #1C4F8D;
}
#hoofdmenu > li:hover ul {
    display: block;
    position: absolute;
    top: 99%;
    z-index: 2;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul {
    position: absolute;
    top: -1px;
    left: 8em;
}
}
.submenu > ul {
    display: none;
}
.submenu > ul > li > a {
    background-color: cornflowerblue;
    border-top: 1px solid white;
    color: white;
    display: block;
    padding: 1em 0.75em 1em 0.5em;
    text-decoration: none;
    width: 7em;
}
@media screen and (max-width: 800px) {
.submenu > ul > li > a {
    background-color: white;
    border-bottom: 1px solid cornflowerblue;
    border-top: 0 none transparent;
    color: dimgrey;
	padding: 0.6em 0.8em;
}
}
.submenu > ul > li > a:hover {
    background-color: black;
}
@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover {
    background-color: dimgrey;
    color: white;
}
}

Kan je een foutje vinden?

[igvfer]

@toontjeEn als je dit nu zo verandert:

#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin: 3 0 0 1;
    width: 100%;
    display: block;

Dus margin 3 pixels boven en 1 pixel links.

[toontje]

Helaas, ook die aanpassing lijkt niet te werken.

Op naar de volgende maar welke???

[igvfer]

@toontje  Stuur mij anders de code eens van de HTML of PHP pagina. Liefst in PB. Want dit zijn nu de style elementen van de CSS. Dit kan helpen om het zelf ens te testen.

[igvfer · Accepted solution]

@toontje  Misschien zit er hier een foutje:

#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.2em 0 0.2;
    position: relative;

padding: 0 0.2em 0 0.2em; Maat vergeten in te geven? Nu staat er gewoon 0.2 zonder eenheid. En als het pixels zijn kan je normaal alleen met gehele getallen werken.

Laat ons weten als je eruit bent.

Een goede plaats om je css te valideren: http://jigsaw.w3.org/css-validator/#validate_by_input 

Je kan ook html en php code valideren, eventjes zoeken op html of php validation.

[toontje]

Het niet vermelden van de eenheid 'em' was dus het probleem.
Zaak opgelost.

Dank voor alle hulp.

[igvfer]

---

@toontje  schreef:

Het niet vermelden van de eenheid 'em' was dus het probleem.
Zaak opgelost.

Dank voor alle hulp.

---

Een klein foutje kan soms grote gevolgen hebben. Maar dat foutje vinden.... daar kan je je op blindstaren.

Blij dat het opgelost is.