Menu not responsive - Post ID 262812

User 2839984 Photo


Registered User
52 posts

1. I created my first menu and set two breakpoints for smaller screens. Menu looks fine on a computer but when viewed on a phone it appears that the break points are not working even though it looks as if they are working in the preview window in MB. What I am I doing wrong? Menu can be seen live here: http://www.longmancomputers.com/global/

2. I also set the max width at 1900 so it will fill the screen of a 1920x1080 resolution. Except once uploaded it looks like it's only 1600. Not filling the width of the browser even though my 8 buttons at 12.5% add up to 100%.

Would not allow me to attached a .mb file, so attached a couple screen shots.
Attachments:
Just another day designing websites for money... it's all good!
User 2699991 Photo


Registered User
3,124 posts
Online Now

can you zip the project file then upload it.

here is a link to an article about extending the menu background to fill an entire page

http://www.coffeecup.com/help/articles/centering-your-buttons-in-a-menu/

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2839984 Photo


Registered User
52 posts

Here it is...
Attachments:
Just another day designing websites for money... it's all good!
User 122279 Photo


Senior Advisor
13,267 posts

Hi Bruce,

I guess you want a menu that collapses and becomes vertical at small screen sizes. Right now you have a menu that stays horizontal and shrinks to oblivion on small screens.
Do this:
Set a breakpoint a little before the menu starts looking squashed. Then in Design mode, the top rightmost option says Layout. Open that and select the version where it says Recommended for small screens. Then it will collapse.

Another thing you need to do, is on the web pages where this menu is to be used, add a metatag for viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Add it right at the top below the meta tag for the charset. In the programme MenuBuilder the menu will be responsive even without this line, but it is necessary on web pages.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
3,124 posts
Online Now

Yes I also agree with Inger it would be far better to have a menu that collapses, or make your final design have two separate menu's there are a lot of buttons to try and squish onto multiple lines, although it is possible there is so much messing about with paddings and margins at almost every level very difficult to control.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2839984 Photo


Registered User
52 posts

Thanks guys, I will try out your suggestions tomorrow. I just bought the suite and this is my first responsive project I have been contracted to do, so I am sure I will have more questions as I get into the content slider and RSD! Talk about diving in head first.

Happpy Father's Day!
Just another day designing websites for money... it's all good!

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.