Misaligned Menu
-
AuthorPosts
-
chrispageonline
MemberHi there,
I’ve noticed that the menu is misaligned, and is not central. This is best shown in mobile and tablet view. In my opinion, the menu should be aligned to the left column, but for some reason it is indented by a few pixels or so. This impacts the ordinary laptop view as well, but it is less noticeable. Hope this makes sense.
Could you help me fix this please?
Kind regards
ChristopherThe blog I need help with is: (visible only to logged in users)
scottrrollo
Theme AuthorHey there, Christopher 👋
You’re right; the menu is offset by a small about because of some padding added to the first menu link. To remove that padding and center-align your menu, try adding this snippet:
nav[role="navigation"] li:first-child { margin-left: 0; }
I hope this helps! Let us know how you go.
chrispageonline
MemberOriginal posterHi Scott,
Thanks for your speedy reply.
The coding has changed the alignment, but unfortunately has not worked. The tablet and mobile views are unaffected, and the laptop view doesn’t appear to be central. Is there a plan B?
Kind regards
Christopherscottrrollo
Theme AuthorSorry to hear that, Christopher!
I have a hunch we’re seeing different things. Would you mind letting me know which browser (or device) you’re seeing this issue on?
If you could also share a screenshot of the problem that’d be a huge help!
chrispageonline
MemberOriginal posterscottrrollo
Theme AuthorAha! I see the problem now, Christopher. Thanks for sharing that screenshot.
To patch up this alignment issue, try adding this snippet:
.dk_options_inner { margin-left: 0 !important; }
That should do the trick. Let us know!
chrispageonline
MemberOriginal posterYou’re the man Scott!
I’ve added both CSS codes, the tablet and mobile views work correctly now. The laptop view is slightly off centre, but I think that’s just because of the words in the menu are giving different spacing. I believe it is actually centred now. If that makes sense? It’s close enough, so I’m happy to leave it as it is.
Thanks for your time!
Kind regards
Christopherscottrrollo
Theme AuthorGlad to help, Christopher!
You’re right; it looks like it’s the length of the menu items themselves that are causing the spacing difference — the width from the edge of the menu to the browser edge is equal.
Let us know if there’s anything else we can help with 😀
- The topic ‘Misaligned Menu’ is closed to new replies.