Issue aligning site title and menus on the same baseline
-
Can someone help me figure out what I've done wrong here:
https://sarabjarland.com/af-nw-homepage/
The site title (the name in the centre) does not share the same baseline/is not aligned perfectly with the two menus either side of it. I've intentionally moved them closer together to help highlight it. It's driving me mad! The 'Space top' in both cases is set to 20px and the typefaces are exactly the same (from the same 'Text format').
I'm sure I've missed something somewhere, but I've been scratching my head for a while now trying to figure it out. Grateful for anyone who can help me out of my misery!
-
Sharing some screen grabs as I'm working on the site at the moment so the link above might not work:
Image of site title (the name in the centre) not aligned with the two menus either side of it.
(I've intentionally moved them closer together to help highlight it.)I noticed today that when viewed through the 'customiser' preview it looks lined up, but that is not the case when visiting the website.
-
@Alex-HH hey, yeah I've noticed this as well that despite sharing the same input values they are slightly offset. I just adjust them separately by eye to line up so site title could be 20px but menu is 18px and they appear aligned. Not sure why but if you experiment with different values on each setting you can get them lined up.
-
Thanks @alasdair17 this is exactly what I ended up doing too!
-
i think this can happen if you use a different font or different fontsize for the site title and the menu
for you that doesnt seem to be the case
for me it seems to work properly:
i use the same font and font size for site title and menus
maybe it has to do with the lineheight. maybe you use a textformat for one and dont use a textformat for the other
in your link it seems you have created a different design so i cant check
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it