[NSFW] Header responsive maken

swingping
(@jahwebcare)

3 jaren, 7 maanden geleden

Hallo wordpress people,

Ik kom ergens niet uit. (op zich meerdere dingen niet maar het gaat nu even om de header)

Ik heb een webshop gemaakt. De header(menubalk) is niet goed responsive op een tablet. Graag wil ik dat de categorieën in 1 regel blijven staan maar op de tablet/ipad komen de laatste 2 regels en als je de tablet horizontaal draait laatste categorie een regel eronder te staan.

Ik heb al gekeken naar de juist css echter kan ik deze niet vinden. Ook met mijn WP Bakery plugin kan ik dit niet veranderen.

Kan iemand mij helpen?

Groeten
John

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

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

Moderator Richard van Denderen
(@rdd)

3 jaren, 7 maanden geleden

Is op zich prima responsive echter omdat er teveel items in staan met te lange namen komt het ook op een 2e regel

Nu zou je met CSS code de tekst kleiner kunnen maken, nadeel daarvan is dat met de vingers ergens op klikken een stuk minder precies is dan met een muis.
Je benadeeld de bezoeker dan 2 maal, door het lastiger leesbaar te maken én moeilijker om aan te klikken.

Eenvoudigste is om de namen en structuur te heroverwegen.
kleding er uit en die onder heren/dames voegen en je hebt alweer voldoende ruimte.

Verder zou je met een @media query
header.site-header div.nav>ul>li>a, header.site-header ul.nav>li>a{font-size:12px;}
de tekst kunnen verkleinen.

Thread starter swingping
(@jahwebcare)

3 jaren, 7 maanden geleden

Hallo richard,

bedankt voor je snelle reactie!

Ik ga kijken of ik mijn categorieen kleiner kan maken. Tekst kleiner maken is ook een idee maar net wat je schrijft, het wordt allemaal lastiger voor de klant dan.

Nu heb ik nog een vraag, wellicht kan je deze ook beantwoorden. Ik krijg de css nog niet voor elkaar mbt de winkelwagen ( https://www.sexyverleidingen.nl/winkelmand/ ) even een product toevoegen en je ziet mijn probleem.

product, prijs, aantal en subtotaal staan te dicht op elkaar waardoor het rommelig oogt. Ook voor de product beschrijving hoort een afbeelding van het product te staan. Deze is er nu wel maar echt heeeeeel klein. Ik heb verschillende css codes geprobeerd maar deze krijg ik niet voor elkaar.

Hopelijk kan jij/iemand mij hier nog mee helpen.

Groeten
John

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

Het onderwerp ‘[NSFW] Header responsive maken’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven