Can't figure how to get both layouts to apply in menu


Registered User
12 posts

I'm developing a menu for my new website and want it to change according to screen size. I can either have a menu set up for medium and large layout or small devices. I have tried to use breakpoints to change it but that does not work. What am I missing here.


Registered User
12 posts

Sorry, I didn't give the website address. computerservicesbytanner.com


VP of Software Development
49,402 posts

What you need to do there Bo is on the breakpoint in Menu builder where you want to show the mobile menu, go to the Design and then Layout Tab and switch to Recommended for Small Screens.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.


Registered User
12 posts

Scoott, I did but it has no effect.


Registered User
12 posts

Did you mean for all Screen sizes? I need it it to change according to screen size.


VP of Software Development
49,402 posts

Bo wrote:
Did you mean for all Screen sizes? I need it it to change according to screen size.

That is what the setting will do for you. For example, iof you want the mobile menu to appear on the 400px and below display, you configure that by the going to the Design and then Layout Tab and switch to Recommended for Small Screens. Then on any display higher than 400px, the full menu will show.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.


Registered User
12 posts

Scott, the way you describe is what I expected but sadly it does not do that. Menu builder displays the menu correctly when you slide the bar to the smaller break point but when you display it in a browser it does not nor does it work correctly when I publish it to my website. It only has the full menu which works OK on ipads but not smaller smart phones. Since menu builder will not do it right, I am looking into exporting the code and using HTML editor to rework CCS style sheets to do it. I don't like this option but I have tried over and over again making sure everything was correct in menu builder.


Registered User
605 posts

Before you try and manually 'fix' the CSS how about sharing your MB file and let someone look it over?
A Rose is Just a Weed in a Corn Patch!


Registered User
579 posts

Scott's reply works for me, and I'm wondering whether perhaps in the various attempts that have been made the Resources box items haven't been fully updated, or the Header item has somehow got corrupted.

It will mean stating much of the very obvious, but it might help if I show the exact steps I took. Doubtless pretty well all this will have been done, but perhaps some tiny bit has been overlooked during the various attempts made.

(a) I opened Menu Builder, chose Horizontal Menu, and moved the slider left to 400px.
(b) I clicked on the plus (+) icon at the top left to create a breakpoint there.
(c) I clicked in Design, then Layout, and in the Layout panel clicked on the Menu button under 'Recommended for Small Screens'. Tools > Preview shows that it works OK in a browser.
(d) I went File > Save to save it with the name 'test'.
(e) I clicked on the Export button and chose a place for the export. The export was a folder named test_exported, which contained a folder (called test) and a file (test.html). Double clicking on that test.html file again showed that it worked OK in a browser.
(f) I opened RSD and the Blank Desktop Down Pixels theme, and added the folder called test to the Resources box, being careful to get it in the top level of the project folder, and not as a subfolder of socialicons. I clicked on the Settings (cog) icon near the top right, ready to add to the Head box.
(g) Going back to Menu Builder I clicked on the Step 1 'Copy to Clipboard' button, and then pasted to the Head box in RSD.
(h) In RSD I went to the Elements panel to create an HTML element and to the Design panel ready to add to the HTML entries in the box.
(i) Going back to Menu Builder I clicked on the Step 2 'Copy to Clipboard' button, and then pasted to the HTML box in RSD. Clicking 'Preview on ...' reveals that it's working OK in the browser.

Frank


Registered User
12 posts

Ernie,
Here is the MB file attached.

Frank, I have tried all you suggested many time since I have been burned by such things before. Also, I import my menu into RSD. Thanks.
Attachments:

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.