Navigation menu cuts off on right side on mobile view

This wasn’t happening before, but for some reason my navigation menu extends past the right border of the screen on mobile. I’ve tried adjusting the “position” and various layout settings, but can’t seem to get anything to work. I’d like it to be right-aligned, and not to take up more than the full width of the page.

Could anyone please help me?

Here is the read-only link.

https://preview.webflow.com/preview/ellephant-music?utm_medium=preview_link&utm_source=designer&utm_content=ellephant-music&preview=19956fee971975344a2017b2581d3c98&workflow=preview

Hi TheNomadicAspie. Please update your post and provide a read-only link to your Webflow project so we can take a look. Instructions are here. Thanks!

Hi Chris, I edited my post with the link in plain-text because I wasn’t able to get the “link” feature to work. Sorry.

Thanks! I see that the structure of the navbar is built in columns, and your menu is nested inside the column. This is preventing the menu from extending outside the bounds of the column it’s located inside. There is probably a way to modify this to trick it into working, but to be honest, I would recommend rebuilding the navbar element outside of a column structure. I think it’ll be the quickest solution and still keep the layout you want.

Thank you Chris. I did rebuild the header without using columns, but the behavior is the same. I tried right justifying the navbar container, but there’s no difference. I also noticed that there’s a grey border that appears around the nav icon when showing the menu, and am unsure which element I need to adjust to change that background from grey to black?

I’ve adjusted the background of every element in the nav bar, but nothing changes that either.

Set your Nav Menu 2 to Fixed right and I think that will achieve the result you want.
image

For the grey border, you’ll need to “Show” the menu:
image
then select your Menu Button 2, and reset the background color. I know it already says it’s black, but just reset it to black, or whatever you’d like, and the border will disappear for this state.

Thank you again so much, that works perfectly. I have one more question though if you don’t mind.

Now the menu takes up the entirety of the vertical height, despite not having “menu fills page height” checked. So when I open the menu, there’s no way to close it by clicking off the menu.

Do you know what could be causing that?

My app usually has overflow hidden so there’s no scrolling, but when the menu is open, because of that resizing it I think, I’m able to pan around left/right/up/down (Which I don’t want) but not easily close the menu.

I can change the height of the menu manually by adjusting the percentage, but if I do “auto” it fills the entire height of the screen. So I’m not sure how to get the menu to only take up the amount of space needed by the links? Is that a side effect of the “position: fixed” attribute?

image
On Nav Menu 2 should take care of it.

That worked to restrict the size of the container, and it looks right in Webflow…

But on my phone it cuts off on the right side.

Is that because I have overflow set to hidden, but maybe the body itself is too wide so it’s aligning with the actual size of the body? There’s a video element that extends past the horizontal borders, but I used overflow settings to get rid of the scroll bar.

Thinking that, I changed fit from cover to contain, but again no difference. And that wouldn’t explain why it looks correct on Webflow but not my phone, right?

I decided to just left-justify it so I can see the menu button to close it. Works better that way anyway. Thanks again for the help.

1 Like