[Resolved] Right aligned menu with list items aligned right

[Jem]

Hi, I’ve searched for a solution here and elsewhere for an hour or more with no joy.

I’m working to a design which requires the main nav to be floated right, logo to left (done via customizer, no problem) and the menu wraps over two lines. To match the design I need the menu items to be right-aligned (wrapping on the right edge, same as multiple lines of right-aligned text), and obviously if I float them right their order is reversed. I realise I could reverse the order of the menu items in the actual menu, but then on mobile they will all be in reverse too, which won’t work.

Is there a feasible way to do this this? I’m starting to think it will require 2 menus, one with items floated right and their order reversed, and another in the correct order for mobile. If that’s the best option, how can I achieve this? (I can’t use the slideout menu due to design constraints – full-on WCAG 2.1 compliance required, no ‘animated’ elements is specified in the brief.)

Edit: I don’t want to just use the secondary menu for mobile and just hide it on desktop, and ideally I don’t want to reverse menu items for the float right option as this will be confusing for screen-readers etc., no?. Accessibility concerns –

Currently the site is local so no URL, sorry, but it’s all pretty standard so far.

GeneratePress 2.1.4

GP Premium 1.7.2

[Leo]

Hi there,

Any examples you can link me to?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jem]

OK, I’ve just put a link to an approximate demo in the original post. It’s much the same, just that the site I’m working on has a logo rather than a site title.

I’ve managed to get the menu properly aligning and wrapping to the right (remove the float from each list item and make them inline-block, then make the main-navigation ul text-align right).

Now the issue is that the menu width needs to be constrained, so as not to jump down underneath the site title due to the number of menu items, but rather have the menu wrap to the right before the left-most item reaches the site title. I need it to remain floated to the right and right aligned until the mobile menu kicks in at 768px, with menu items wrapping as needed. Max-width with percentages could work (it’s set to max-width 750px now) but it needs loads of media queries as the width gets narrower. I thought if the site title was floated left and menu floated right with a margin on the left to avoid the site title, they should sit beside each other, but the menu jumps beneath if I try that.

It’s got to the point where I can’t see wood for trees, thanks for helping.

[Leo]

You can increase the mobile navigation breakpoint:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jem]

I could indeed. No worries, I’ll come up with something.

One last thing – how can I reposition the mobile menu from below header to above header when under 768px? Can it be unhooked/rehooked?

[Leo]

Can you open a separate topic for this question?

It might be useful for others as well.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jem]

OK will do.

[Leo]

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jem]

Re-opening this as it wasn’t really resolved. I’m looking for a way to position and limit the width of the floated right menu so it’s fluid, not crowding out the left-aligned logo or jumping underneath it when the screen gets smaller, instead wrapping the menu items to the right as required until the mobile menu kicks in. Initiating the mobile menu at a larger width is a workaround, but not really a solution to the query.

[Leo]

Not quite sure if I understand.

Can you show me an example of someone successfully implemented what you are looking for?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jem]

No, sorry, I don’t, but it’s very simple:

• Header with left-aligned logo (via Customizer).
• Menu floated right, opposite the logo (via Customizer).
• Menu items aligned right. If there are ‘too many’ menu items it usually causes the entire menu to jump below the logo. I’d like the menu to wrap onto a new line (wrapping to the right as the items are right-aligned). I’ve achieved the right alignment of individual menu items by removing the float:left from each list item and making them display: inline-block, then making the main-navigation ul text-align: right. Otherwise, even though the menu itself is right-aligned, the menu items themselves are floated left so the wrapping occurs on the left of the navigation block

I’ve had to set a fixed max-width in pixels on the nav in order for the menu to wrap – the default behaviour, from what I can tell – is for it to extend to 100% of available width, and if the menu is too long to fit to the right of the logo it jumps down underneath it. And as I say, the default wrapping is to the left (even with a right aligned navigation), so I had to adjust the CSS as above for it to occur on the right.

What I’d like to do is have the width of the right-floated navigation fluidly adapt to accommodate the logo as the screensize changes, so that menu items wrap (to the right) onto another line, with the menu remaining in place to the right of the logo, not jumping underneath it. I can give it a percentage width but it needs to be changed at various breakpoints due to the way the layout changes as the screensize reduces.

Ideally I’d like the nav floated right with width: auto and a left margin (or something) to accommodate the logo, thus preventing the menu from jumping below the logo on smaller screens, at least until the mobile menu kicks in.

[Tom]

Hi there,

Give this a shot:

.inside-header {
    display: flex;
}

.nav-float-right .inside-header .main-navigation {
    margin-left: auto;
}

You may need to run it through this tool depending on the browser support you need: https://autoprefixer.github.io/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jem]

That’s great Tom, perfect, thank you. Must get my head round flexbox.

[Tom]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts