[Resolved] Menu padding

[Torsten]

Hi,
I’m trying to left-align the 1st menu item with the text/blog in “contact” and “blog”, even if resizing the browser window.
On top, under login the menu moves a few pixel to the right, which it shouldn’t…
Thanks ahead for your support,
Torsten

[David]

Hi there,

sorry i am not fully understanding the issue. Can you provide a mockup of how you want it to look ? Or what the issue is?

[Torsten]

Sorry for that,
in both screenshots below I copied the menu, the upper menu is the actual menu position in both images, the second position below shows where the menu should be.
Hope this helps,
thanks again,
Torsten

resized screen: https://bit.ly/2u39sbh
full screen: https://bit.ly/2T0Bkaj

[Torsten]

here is another one from the blog page with just the actual menu and the line to which the menu should be aligned.
https://bit.ly/2NY2QUM
best,
Torsten

[David]

Aah ok, so we need to offset the menu item padding of 15px with some negative margins like so:

@media (min-width: 1360px) {
    .main-navigation ul {
        margin-left: -15px;
    }
}

May need to tweak that min-width setting a little.

[Torsten]

lovely!
Thx a lot.

[David]

You’re welcome

[Torsten]

sorry, one more…
when clicking on LOGIN the menu items are moving slightly to the right.
any idea?
thx and best,
Torsten

[David]

I am not seeing that? maybe its only when admin is logged in.

[Torsten]

Hi David,
no, it’s even happening when logged out.
tested in Chrome, Firefox and Edge, all with the same effect.
You can see the effect pretty good in this gif → https://bit.ly/2Y1Taxk
not perfectly as it moves up a little too, which it doesn’t on the Website…
best,
Torsten

[Tom]

I believe what you’re seeing there is the scrollbar disappearing because the page isn’t long enough.

[Ferdinand]

I was about to ask for help resolving what I thought was my own menu padding problem when, for whatever reason, I pulled up Chrome’s “Inspect Element” [Ctrl + Shft + I]. The diagram under the “Computed” tab clearly showed it wasn’t the nav bar padding but my Page’s unique “Feature Image” top margin (just below the nav bar) that was the issue–it was set to 30px, which would make sense if I didn’t intend it to replace my header image. So, a search under the “Elements” tab led to this string which I copy-pasted into Additional CSS and set to 0px:

.separate-containers .page-header-image, .separate-containers .page-header-content {
margin-top: 30px;
}

[Leo]

Glad you figured out!

[Torsten]

Thx, me stupid…
😉

[Author]

Posts