Close

Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings

UPDATE LAYERS View on GitHub

How to Restyle the Mobile Sidebar into an Overlay Dropdown

How To  Tutorials  Last Updated: Time to Read: 3 minutes

By default, the Mobile Sidebar or “off-canvas-sidebar” uses a CSS3 transform to slide in and push the main site content over when it is toggled open on a mobile display.  You may want to change this into a more traditional drop-down to serve as more of a mobile-menu than a sidebar. Rather than add a new menu and custom markup, you can do this with pure CSS.

Keep in mind that most mobiles are held in the portrait position and have a maximum screen height of 480px. This trick works best when only a menu will be used here, rather than a long sidebar of widgets a user will be forced to scroll through before they can click out.

To get the most mileage out of customizing mobile views, use the DevKit extension to add live CSS and JavaScript editing to your customizer. You may also open responsinator.com in a separate browser tab and load in your URL to easily access the applied media queries for the menu in each screen size in your browser inspector.

The first thing we do is get our site previewed in a mobile tester, and click open the menu. This example uses DevKit with Chrome’s inspector.

menu-customization

Here we select the off-canvas-right element, which is typically located just after the opening <body>  tag, to view its styling on the right side of the inspector. From here, we can begin live-editing the CSS to change some properties and add some.

If you are using DevKit, make sure you are on the Mobile tab. If adding code to the CSS panel or a Child Theme stylesheet directly, you must ensure this is inside of the right media queries. Example:

 

The first thing we need to do is reset the menu’s position, z-index and add a background color:

The absolute position ensures the menu scrolls with the page rather than staying fixed, so the user can access any elements that go beyond the screen’s default height limit or “beyond the fold.” We also must reset the original left position to 0 and add some space using top. The default Layers mobile header is 60px tall. You may adjust this up or down to fit your site’s default header, or leave it at 0 if your want your menu to overlay the entire viewport until closed with the X button. The z-index ensures the menu sits on top of the page, and because the sidebar container itself doesn’t have a background color by default, we must give it one.

Once we are satisfied with our live edits, we can copy the selector and the custom properties into the DevKit editor panel. If you are working on a raw stylesheet or with the basic CSS panel. you will need to add the appropriate media query to target the correct screen size(s).

Of course, this initial CSS snippet alone does not quite do the trick. We need to stop the content from moving over when the button is tapped.

In your browser inspector, click the  wrapper-site element, which is the element following the off-canvas-right . You should notice the active style on the right is setting a CSS3 transform to shift the content left by 240px. Copy this entire style into DevKit or your stylesheet and change the value of left to 0:

 

menu-customization2

Finally, we can add the finishing touch by making it adjust to the screen width.

This does not need to be in a media query, as it is a default framework style, unless you are using the off-canvas sidebar for desktop views and want the overlay behavior to apply only to mobiles.

If you did not use responsinator originally, now is a good time to load up your url (works with localhost too) at http://www.responsinator.com. Test your menu customization on all of the primary screen sizes to see if you need to add adjustments or broaden the range on your media query. Once you are satisfied with how it performs in responsinator, test it on a real mobile device so you can be sure the mobile browser not only renders the change correctly, but picks it up at all from your media query overrides.

For detailed tips on responsive testing, see How to Test Responsive or Mobile views of your site

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.

Jetpack