Menu op 2 regels?

Opgelost koddigekoters
(@koddigekoters)

1 jaar, 9 maanden geleden

Hoi hoi,

Het menu van mijn website wil maar niet echt mooi worden. Als je de website smaller maakt, dan gaat het menu op 2 regels, maar totaal niet netjes. Ik loop er echt een beetje in vast. Het mooiste zou zijn dat ie eerder in een hamburger menu schiet. Maar ik begreep dat dat lastig is? Van mij mag ie ook best op 2 regels, maar dan dat ie in de header blijft zitten en dat de regelafstand minder is.

Bij mobiele weergave is de regelafstand ook erg ruim waardoor het onhandig wordt.

Ik hoop dat iemand iets weet. (template dat ik gebruik, is storefront)

Groetjes, Maaike

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)

1 2 →

Guido
(@guido07111975)

1 jaar, 9 maanden geleden
Hoi,

Ik heb een CSS fix gevonden, die je op pagina Extra CSS van de Customizer kunt toevoegen, zie deze pagina.

Let op, je moet alle notities zoals onderstaande uit de CSS verwijderen, want anders wordt de CSS niet geladen. En uiteraard je eventuele eigen aanpassingen in de CSS vh menu ook verwijderen.
```
//CHANGE MENU TOGGLE BREAKPOINT
//*****************************
//***************************** 

//SHOW MENU TOGGLE
//************************
```
Guido
Thread starter koddigekoters
(@koddigekoters)

1 jaar, 9 maanden geleden

Dankjewel Guido,

Helaas geeft het nog niet het gewenste effect. Of doe ik iets fout? Ik zie geen verschil. Ik ben niet heel technisch. Ik weet hoe ik een stukje CSS moet invoeren, maar er blijven wat dingen rood staan. Moet ik daar dan mijn eigen benaming van die onderdelen in zetten?

groetjes, Maaike
Guido
(@guido07111975)

1 jaar, 9 maanden geleden
Hoi Maaike,

Net boven de nieuwe CSS heb je dit staan:
```
        width: 100%;
    }
}
```
Dat hoorde ergens anders bij en moet nog verwijderd worden.

Guido
Guido
(@guido07111975)

1 jaar, 9 maanden geleden
Hoi opnieuw,

Ik heb even opnieuw naar de CSS gekeken, en deze blijkt helaas niet vrij van fouten te zijn. Verwijder alles maar en plaats daarvoor in de plaats dit:
```
/* MAX WIDTH 991PX */
@media screen and (max-width: 991px) {
	/* SHOW MOBILE MENU TOGGLE ON SMALL SCREEN */
	.menu-toggle,
	.handheld-navigation,
	.main-navigation.toggled .handheld-navigation,
	.main-navigation.toggled div.menu {
		display: block;
	}
	/* HIDE PRIMARY NAV ON SMALL SCREEN */
	.primary-navigation {
		display: none;
	}
	/* MENU ITEMS */
	.main-navigation ul li, 
		display: block;
	}
}

/* MIN-WIDTH 992PX */
@media screen and (min-width: 992px) {
	/* HIDE MOBILE MENU TOGGLE ON LARGE SCREEN */
	.menu-toggle, 
	.handheld-navigation, 
	.main-navigation.toggled .handheld-navigation, 
	.main-navigation.toggled div.menu {
		display: none;
	}
	/* SHOW PRIMARY NAV ON LARGE SCREEN */
	.primary-navigation {
		display: block;
	}
}

/* MIN-WIDTH 768PX AND MAX-WIDTH 991PX */
@media screen and (min-width: 768px) and (max-width: 991px) {
	/* MOBILE MENU TOGGLE */
	.site-header button.menu-toggle {
		top: -20px;
	}
}
```
Guido
(@guido07111975)

1 jaar, 9 maanden geleden

Toch weer foutje in mijn CSS van hierboven:

.main-navigation ul li,

Moet zijn:

.main-navigation ul li {

Guido

Thread starter koddigekoters
(@koddigekoters)

1 jaar, 8 maanden geleden

Hoi Guido,

Wat fijn dat je het hebt willen uitzoeken voor me. Helaas zie ik nog steeds geen verschil. Doe ik iets fouts? Het zou mooi zijn als het menu eerder op hamburger schiet, of dat de uitlijning van het menu op 2 regels mooier is en niet over de website heen valt.

Gr. Maaike

Thread starter koddigekoters
(@koddigekoters)

1 jaar, 8 maanden geleden

@media all and (max-width: 480px) {
.product-grid .item-box,
.product-list .item-box {
width: 48%;
margin: 0 1% 30px;
float: left;
}
.product-grid .item-box:nth-child(2n+1),
.product-list .item-box:nth-child(2n+1) {
clear: both;
}
}
.product_meta .posted_in {display: none !important;}
.product_meta{
display: none !important;
}

.woocommerce-breadcrumb {
display: none;
}

@media screen and (max-width:767px) {
ul.products li.product {width:48%; float:left;}
ul.products li.product:nth-of-type(odd) {clear:left;}
ul.products li.product:nth-of-type(even) {margin-left:4%;}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
padding-top: 120px !important;
}
}

@media only screen and (max-width: 768px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
padding-top: 110px !important;
}
}

.product.outofstock {
opacity: .3;
}

@media screen and (min-width:767px) {
.col-full {
max-width: 80%;
}
}

#masthead {
position: fixed;
top: 0;
width: 100%;
}

body.woocommerce #primary {
float: none;
width: 100%;
}

@media only screen and (min-width: 767px) {

#masthead.site-header {

height: 194px!important;
margin-bottom:0px

}
}

@media screen and (max-width:767px) {
header#masthead {
background-repeat: no-repeat;
background-position: top;
}
}

.woocommerce.tax-product_cat .add_to_cart_button {
display: none;
}

width: 100%;
}
}

@media screen and (max-width: 991px) {

.menu-toggle,
.handheld-navigation,
.main-navigation.toggled .handheld-navigation,
.main-navigation.toggled div.menu {
display: block;
}

.primary-navigation {
display: none;
}

.main-navigation ul li {
display: block;
}
}

@media screen and (min-width: 992px) {

.menu-toggle,
.handheld-navigation,
.main-navigation.toggled .handheld-navigation,
.main-navigation.toggled div.menu {
display: none;
}

.primary-navigation {
display: block;
}
}

@media screen and (min-width: 768px) and (max-width: 991px) {

.site-header button.menu-toggle {
top: -20px;
}
}
Guido
(@guido07111975)

1 jaar, 8 maanden geleden
Hoi,

Ik zie dat je nog steeds dit niet verwijderd hebt:
```
width: 100%;
}
}
```
Guido
PS. Als je code toevoegt, druk dan vóór en na de code op de “code” knop die in de tekstopmaak balk boven het invoerveld staat.
Thread starter koddigekoters
(@koddigekoters)

1 jaar, 8 maanden geleden

Hoi Guido,

Die width 100% heb ik er nu uitgehaald 🙂 Het maakt voor het menu alleen nog steeds niets uit, helaas.

Als ik code toevoeg, dan zie ik nergens ‘code’ staan. Alleen de regelnummers en de codes zelf. En onderin de verschillende weergaven voor mobiel, tablet en computer.
Moet ik dat ergens anders zien staan?
Guido
(@guido07111975)

1 jaar, 8 maanden geleden
Hoi,

Werkt hier nu wel, denk dat je de cache (geheugen) van je browser even moet legen.

Maar het ziet er helaas niet goed uit. Het kost mij veel te veel tijd om het goed te krijgen.

Ik stel daarom het volgende voor…

1) Verwijder al mijn menu CSS weer.
2) Ik zie dat je eerder CSS hebt toegevoegd om de header-afbeelding beter weer te geven? Die CSS zorgt er ook voor dat menu in normaal scherm niet goed wordt weergegeven.

Verwijder daarom dit van pagina Extra CSS in de Customizer:
```
#masthead {
	position: fixed;
	top: 0;
	width: 100%;
}

@media only screen and (min-width: 767px) {
	#masthead.site-header {
		height: 194px!important;
		margin-bottom:0px
	}
}

@media screen and (max-width:767px) {
	header#masthead {
		background-repeat: no-repeat;
		background-position: top;
	}	
}
```
Voeg alleen dit hiervoor in de plaats toe:
```
.site-header {
	background-position: top center; 
	background-repeat: no-repeat;
}
```
3) Je hebt volgens mij in je header een widget geplaatst om extra witruimte te creëren? Ik denk dat je die widget beter kunt verwijderen.

Wat het toevoegen van code betreft het volgende.. ik bedoelde toevoegen van code in dit forum. Boven het invoerveld zie je een tekstopmaak balk en daarin staat onder meer “code”. Daar moet je op drukken vóór je code en na je code. Dan wordt code in een grijs blok weergegeven.

Guido
Thread starter koddigekoters
(@koddigekoters)

1 jaar, 8 maanden geleden

Wow, Guido! Thanks. Dit is al een hele verbetering. Top man! En het menu kan nu ook scrollen in de mobiele versie.

Ik zie alleen nog een herhaling van de achtergrond in de mobiele versie. En een rare streep onder de header. Ik kan even niet achterhalen waar die nou vandaan komt. Ik ga dat even uitzoeken.

Thread starter koddigekoters
(@koddigekoters)

1 jaar, 8 maanden geleden

Inmiddels gelukt! Je bent een topper. Heb hier echt heel lang mee lopen puzzelen. Weet jij misschien nog hoe ik de regelafstand zou kunnen verkleinen als het menu op meerdere regels schiet? Of is dat niet mogelijk?
Guido
(@guido07111975)

1 jaar, 8 maanden geleden
Hoi,

Graag gedaan!

Ik zie op mijn iPad ook nog veel witruimte aan de rechterkant. Hierdoor schiet menu in kleiner scherm eerder op 2 regels.

Om dit weg te halen, moet je deze CSS nog van pagina Extra CSS verwijderen:
```
@media screen and (min-width:767px) {
.col-full {
	max-width: 80%;
}
}
```
Weet jij misschien nog hoe ik de regelafstand zou kunnen verkleinen als het menu op meerdere regels schiet?

Ik zou het verder nu mooi zo laten, Storefront is een erg populair en goed thema, je moet niet veel in de opbouw ervan wijzigen.

Guido
Thread starter koddigekoters
(@koddigekoters)

1 jaar, 8 maanden geleden

Ja, dat is misschien ook wel zo! Super bedankt! Ik ben heel blij met je hulp. Dan ga ik deze topic sluiten.

Groetjes, Maaike

Guido
(@guido07111975)

1 jaar, 8 maanden geleden

Mooi zo en graag gedaan!

Wil je de status van dit topic nog even op “opgelost” zetten?

Guido

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)

1 2 →

Het onderwerp ‘Menu op 2 regels?’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven