How to centre Menus

User 2763645 Photo


Registered User
7 posts

Hi,

Please can you advise how I can centre the Navigation Menu

It is centered when on a single horizontal line with 7 items - but when reducing screen size for tablets/mobiles etc... the menu items become left-aligned and not centered.
User 2088758 Photo


Senior Advisor
2,700 posts

Hi Neil,

You will need to check your break points. Do you have a link to your website so we can see it live in action.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2763645 Photo


Registered User
7 posts

User 271657 Photo


Senior Advisor
3,816 posts

Are you adjusting your margins, paddings and width for the smaller breakpoints?
Also, are you switching to the mobile menu set-up at smaller sizes?
Could you post a link to the page with the menu?

:)Welcome to the forums Neil
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2088758 Photo


Senior Advisor
2,700 posts

Yes as PB said, you need to align your margins for each button at the different breakpoints. It appears you have no break points at all.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2763645 Photo


Registered User
7 posts

There are breakpoints... (whether correctly set or not) as I resize the screen the menu breaks.... and also view differently on mobiles.. just left-aligned.

how do you adjust margins to centre at the breakpoints?
User 2273654 Photo


Registered User
637 posts

Copy and paste this url and go by these directions. Or it is worth a try.
http://www.workhorsepainting.com/albums/centering.jpg
Run your slider down to where your navigation is not centered. Click on the block that you want to fix. Call up properties for that block. Click the two auto settings for the Margin settings so they are checked. Set Float and Clear to none. Go down to Display and select Block. This should center your element. Save your work and then preview and see if it worked. Run down the slider again and see if any more adjustments need to be made.

User 271657 Photo


Senior Advisor
3,816 posts

Have you noticed the different widths of your submenu items at smaller screen sizes (before it goes to mobile)? Some are so wide they bring up a scroll bar, others are around 100% and some cover about 75%.
There's inconstent spacing between some items when they stack...
I'd take another look at the settings for everything at each breakpoint, it looks like you need some adjustments between 900px and where it switches to the mobile format.

I usually leave the menu at auto width or 100% and tweak the font size, padding and margins for each button.
So, when the menu starts to stack, you could make everything a bit smaller to keep it on one line, or change the menu buttons to 50% width to have 2 columns side by side (adjust margins and width as needed).
You will need to go through ALL your menu/button, submenu/submenu button settings at each break point.

Your left-right margins need to be even (either auto or the same em,px,% size) to be centered.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2763645 Photo


Registered User
7 posts

Thanks Paintbrush - I take your points re sizing etc...
I have the auto-margin set or ticket at each break point so I am not sure what else I have to set to get them centered at each break point
User 2763645 Photo


Registered User
7 posts

Thanks GregB. but that is Responsive Layout Pro.... my problem is with the menu builder...

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.