Mobile nav button theming messed up. Help, likely not a bug.

It is the "justify-content-center" class on the menu block on the block layout page that is messing things up.

But if I don't have that, then the fact that I put the edge-to-edge screws up my alignment.

The goal of having edge-to-edge AND centered is proving a challenge.

ravi kant → made their first commit to this issue’s fork.

The issue is due to custom theme.
I did not find issue in default styles.
So the issue will be fix according custom work of custom theme.

In your example, the menu is left justified. I noted in my OP that the issue happens when the menu is centered.

If you have testing ability on your site, can you apply the

justify-content-center

class to the menu block in the block layout configuration page?

TB Mega menu also have option to add classes on parent and child item's wrapper.

So does it look ok on mobile when you do that or not?

@HeneryH
I just review again your comments.
I think something is broking due to your custom styles work.

Can you just confirm that your test shown above results in the proper behavior? You showed centering the menu with a class but you won't confirm that it looks proper on mobile.

@HeneryH
I have added a mobile view screenshot in #5
So i can say that it working as designed in mobile devices.

Ravi, that screen shot is left justified. This post is about center justified.

@HeneryH
I have just confirmed with justifying option. I am not getting any issues.
So I am sure that you are getting the issue due to other styles.

I don't understand the misunderstanding here. The image that you are providing for evidence is NOT center justified.
It is clearly left justified.

Am I mistaken? Comparing my image above that is center justified to your image that is left justified.

You are showing a left-justified image to say that my scenario of center justified usage is a flawed issue.

I am checking in olivero theme.

@HeneryH
Is possible to share your website URL? so i can check actual possible issue.

Sure, here it is. Looks fine on desktop, Mobile is messed up.

https://www.flynnconsultingllc.com/

@HeneryH
The issue is due to display flex properly on block-content dev.
This can fix by overwriting styles.
Please see the attached video "issue-is-due-to-default-style.mov"

Thank you for your time helping me debug this. I knew it was unlikely a bug and appreciate your help. I will investigate with your suggestion.