Premium Theme Support › The Theme Foundry › Avid

Misaligned Menu

  • Author
    Posts
  • #109003

    chrispageonline

    Hi 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
    Christopher

    The blog I need help with is christopherpage.blog.

    #109236

    scottrrollo
    Theme Author

    Hey 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.

    #109240

    chrispageonline

    Hi 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
    Christopher

    #109278

    scottrrollo
    Theme Author

    Sorry 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!

    #109286

    chrispageonline

    Hi Scott,

    No worries, hope you had a nice Easter!

    Here’s the screen shot, taken from Chrome:

    https://mindbodychris.files.wordpress.com/2017/04/screen-shot-2017-04-18-at-16-22-24.png

    Can you see that it’s indented maybe 5 / 10 px? This affects the desktop / laptop view as well.

    I’ve just tested Firefox and it’s the same. Hope this helps!

    Kind regards
    Christopher

    #109288

    scottrrollo
    Theme Author

    Aha! 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!

    #109289

    chrispageonline

    You’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
    Christopher

    #109293

    scottrrollo
    Theme Author

    Glad 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 😀

  • Author
    Posts

The topic ‘Misaligned Menu’ is closed to new replies.