centering / alignment at different scales

[mpilosov]

centering / alignment at different scales

[mpilosov]

another centering problem: text in button may not quite be centered vertically (recently played with this in custom.css and fixed a horizontal centering problem and it seems to be okay but I want verification that it's not a pixel off or something silly like that):

[ccthecode]

New PR will fix Issue 1

[mpilosov]

oh i see now... (got confused by stuff from issue 2 being in the same PR), you did fix everything in the first image, and the second image is still a WIP.

is the third image addressed? I can't quite tell.

[ccthecode]

Yes, Third image is addressed

[mpilosov]

Ill test the even number of menus and wide titles later tonight. I did notice the highlight on press is the wrong size (not full width/height of menu item)

[mpilosov]

in addition to the highlighting on hover there is also the boldness of the lines here:

[mpilosov]

even number of menu items still not working quite right either... but we're getting close.

[mpilosov]

Also, while this is sensible:

I'd also expect the following situation to lead to a vertical alignment (all boxes should all be the same width as each other) rather than the weird displacement:

[ccthecode]

@mpilosov
Ill look into the highlight issue.

About all menu links being the same width as the largest. I can do that. But bear in mind that it will create responsiveness issues.

How?

The overall menu width, will turn out to be wider that the viewport width. Hence cutting some menu links out and offscreen.

I wrote a media query that allows menu links to take equal width. But this would only work for screen sizes larger than 1000px.

After this is done. I'll probe the site for animation controls and point you there

[mpilosov]

menu links should never get cut offscreen. I don't quite understand. If the menu width exceeds viewport width, that should trigger the "vertical stacking" as it does when the screen is narrow (in other words, I expect the last screenshot in my last comment) to have a vertical menu, not horizontal.

based on what you're saying I would guess the logic for whether the menu is horizontal or vertical is based solely on the width of the screen, not the width of the potential menu size, and since you can't make it aware of the latter, you're triggering "equal width only when the screen is wide enough to support it"?

can you please propose this media query change in isolation in its own PR, but put the other fixes separate? I want to be able to revert that commit easily.

[mpilosov]

@ccthecode in order of importance:

• thick right-hand-side on vertical stack (overlapping borders)

• highlight issue on menu items

• menu item boxes should be uniform width

• even number of menus should have center bar "in middle"

[ccthecode]

I just sent a message via your website form. Lets schedule a Demo. I figure that'll be the best way to explain things

[mpilosov]

I understand that fixing the navigation requires a re-factor with grid css, so we'll close this for the time being given that we have a solution in place.

I'm really particular about having all the nav boxes have the same width all the time, no matter what.

I think the only solution for the time being that isn't a "hack" based on page width or having even/odd numbers behave differently is to use the current "vertical stack" approach at all page widths. This gives uniform widths already and would satisfy my requirement of equality. The "horizontal stack" is indeed nice for wide screens though.