How to centre Menus - Post ID 247234

User 2273654 Photo


Registered User
637 posts

Sorry, I have had the menu builder for a long time and have not used it yet. I am going to be using it real soon though. Opps sorry I mean shortly. I am hoping that the responsive controls are similar between the different applications.

User 2763645 Photo


Registered User
7 posts

I have 7 buttons of varying width (due to menu names being different length)
They centre at full screen width on a desktop but when I reduce the width of the screen the buttons all become left-aligned
and not centered.
At the first break-point all buttons remain on 1 row
at the second break-point they changed to two columns - 4 rows
Auto-margin is tickets for all

How to get centered for all buttons on 1 row?
Also does max width get changed for each break-point?
User 2273654 Photo


Registered User
637 posts

I just have been playing around with the menu builder for the first time. I was not getting very far with it. I switched to the button builder and was having much better luck working with that one. I have decided for myself to do a nine button wide horizontal menu on my RSLMP, to make them as much as possible equal size and get them to be adjusted on down for responsiveness. I will then import the nine individual buttons that I make up for the nav links into either the editor or the RSD. So I will be working with all 3 or 4 of them allot with all of the buttons that I have on my site. I like the hover effect and use it on my VSD site allot and will put it into the new rebuild. VSD seems to have had more versatility than these individually small specialty programs. I am finding that I cannot exactly reproduce the effects from the VSD, just can do similar simpler effects.
Or I could make the nav line of the 7 horizontal links and not make them fancy with mouse overs and just make it all up in the RLMP. Sorry there are nine buttons

User 271657 Photo


Senior Advisor
3,816 posts

I still think you need to check ALL your menu and button settings. Look at the size (width) of your buttons when the screen is smaller and they stack to the left:
https://dl.dropboxusercontent.com/u/24622205/coffeecup/mb-buttons.jpg
They're way wider than what they start out as at full-screen. So there's no way they could stay in one line across the available space. Some of the sub-menu buttons are also way wider than needed.

#menuBuilder #nav ul li.menu_items {
float: left;
padding: 0px 0%;
margin: 0px 1% 0px 0%;

@media screen and (max-width:854px){
#menuBuilder #nav ul li.menu_items{
width:35%;
}
@media screen and (max-width:640px){
#menuBuilder #nav ul li.menu_items{
width:40%;
}

Above, there are button widths set for 35% and 40%; so 7 buttons x 35 = 210... or 210%. :o
They have to stack to fit into the space.
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 - stacking the menus isn't a problem.. just that when they are stacked getting them centered.... it turns out that I believe the file is corrupt and may well have to start over again...

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.