Schoonheidsfoutjes wegwerken in menu

Opgelost kostenzer
(@kostenzer)

2 jaren, 5 maanden geleden

Hallo,

In het dropdownmenu onder introductie staat:
Vijf elementen (Wu
Xing)

Het zou er mooier uitzien als er:
Vijf elementen
(Wu Xing)
zou staan.

Ik heb geprobeerd het navigatielabel aan te passen in: Vijf elementen (Wu Xing).
Dat leverde geen resultaat op.
Ik kan natuurlijk een nieuwe menupagina maken, maar kan het ook eenvoudiger?

Bij Behandelmethode staat Bioresonantietherapie, waarvan de laatste “e” op een nieuwe regel staat. Kan de dropdownbox iets breder gemaakt worden of is er een betere oplossing?

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

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

Guido
(@guido07111975)

2 jaren, 5 maanden geleden
Ik zou lettergrootte iets kleiner maken want ik vind het in verhouding wel erg groot, ten opzichte van de rest vd site.

Of in ieder geval het submenu, dat kan wederom door aangepaste CSS. Probeer dit eens:
```
.main-navigation .sub-menu {
font-size: 20px;
font-size: 1.3333333333333rem;
}
```
Groeten, Guido

ps. dit topic is eigenlijk een aanvulling op een eerder topic, dus je kunt ook daar je vervolgvraag stellen ipv een nieuw topic aan te maken.
Thread starter kostenzer
(@kostenzer)

2 jaren, 5 maanden geleden

Ja, dat dit een vervolg is op het vorige is me NU duidelijk geworden.
Ook deze oplossing werkt perfect.

Voor
Vijf elementen (Wu Xing) is dat helaas geen oplossing.
Moet ik daar een nieuwe pagina voor aanmaken met wat meer spaties tussen elementen en (Xu of is er een andere manier?
Thread starter kostenzer
(@kostenzer)

2 jaren, 5 maanden geleden
Omdat ik vind dat de menu-items wel erg ver uit elkaar staan ben ik gaan zoeken. Ik dacht als je de regelafstand verkleint gaat het beter uitzien.

Ben uitgekomen op https://www.w3schools.com/cssref/pr_dim_line-height.asp

Heb dit toegevoegd:
.main-navigation .sub-menu {
line-height:10%;
}

Ongeacht welk percentage ik invul, er verandert niets.

Via https://www.w3schools.com/cssref/default.asp kan ik ook niet achterhalen wat hiervoor in aanmerking komt.
- Deze reactie is gewijzigd 2 jaren, 5 maanden geleden door kostenzer. Reden: Link was niet zichtbaar
Guido
(@guido07111975)

2 jaren, 5 maanden geleden
Met line-height bepaal je de regelhoogte, maar in jouw geval wordt de witruimte boven/onder elk item in het submenu bepaald door padding.

Probeer dit eens:
```
.main-header-menu .sub-menu a {
padding: 0.2em 1em;
}
```
(de 0.2em is de witruime boven/onder)

Guido
Thread starter kostenzer
(@kostenzer)

2 jaren, 5 maanden geleden
Hallo Guido,

Met weer wat proberen is een tweede probleem ook opgelost.
.main-header-menu .sub-menu a {
padding: 0.2em 0.6em;
}
is het geworden.
Wederom bedankt.
Ik was uitgegaan van .main-navigation .sub-menu hoe had ik kunnen weten dat het
.main-header-menu .sub-menu a had moeten zijn?

mvg

Rob
- Deze reactie is gewijzigd 2 jaren, 5 maanden geleden door kostenzer.
Guido
(@guido07111975)

2 jaren, 5 maanden geleden

Hallo Rob,

Wat ik altijd doe is het betreffende element inspecteren via de browser (het element met je muis aanwijzen en dan rechtermuisknop > inspecteren klikken). Toen zag ik de padding staan bij .main-header-menu .sub-menu a.

Wat jij zegt werkt mogelijk ook .main-navigation .sub-menu a dus zou je ook kunnen proberen. Binnen CSS is echter wel prioritering van toepassing, dus het zou kunnen zijn dat jouw aangepaste CSS genegeerd wordt.

De class main-navigation is van de container die om het hele menu heen zit en de class main-header-menu is van het menu zelf.

Guido

ps. als je code in je topic/reactie zet, druk dan voor en na de code op de “code” button in de tekst opmaak balk.

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

Het onderwerp ‘Schoonheidsfoutjes wegwerken in menu’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven