How to Hide Elements in Breakpoints

In Responsive Designs you need to adjust the size or move the elements to fit the browser size. In smaller breakpoints, the content gets more specific so you might need select the most important elements to show. In Adobe Muse you cannot delete the content, but you can hide certain elements in your different breakpoints. This is how it works:

  1. In the picture you can see a homepage with the logo on the left and the menu on the right.

screen-shot-2016-11-08-at-13-19-44

 

2. But when you move the browser and it gets smaller, the design breaks. This means that you need to adjust the elements to the new size.

screen-shot-2016-11-08-at-13-43-05

 

In Adobe Muse you cannot delete the elements, as they will not appear in your workspace if you do that, but you can hide certain elements in the different breakpoints. In this homepage, I have created two breakpoints (1200px and 880ox). I have also decided to use a mobile menu (hamburger menu) for the smaller breakpoint. This is how you do it:

  • In the biggest breakpoint (in this case, 1200px) select the menu, right click to display options and choose “Hide in other brekpoints” so it will not appear in the smaller breakpoint.

screen-shot-2016-11-08-at-13-54-01

  • I have placed the mobile menu in the 880px breakpoint. Select the new menu and click on “Hide in other breakpoints” too. This way, the mobile menu will only appear when the browser hits 880px.

screen-shot-2016-11-08-at-13-55-03

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top