different menu design for small screens WordPress: Responsive Themes


show more Creating a different menu design for small screens provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes show less
please wait ...

Creating a different menu design for small screens

When dealing with responsive menus, especially for smaller devices like phones and tablets, you may need to think of providing alternate styles rather than just resizing or reorganizing of layouts. Even though a menu might be easy to click on with a mouse, it might be harder to click on when you use your thumb or your finger on a touchscreen device because the menus generally are really small when you have them on a regular screen. If you look at the original design, you will see that I intended the menus on smaller screens to be these large buttons that are below the main header so that they're separated clearly menu items and they are easier to click on.

So what I want to do is create new styles in the media queries that completely restyle the menu in the page. I will show you how I do this by using the Chrome Developer Tools. By using the Chrome Developer Tools, I'm able to experiment with the live code on the page and then I can change only those elements that nee...

Creating a different menu design for small screens
Video duration: 7m 47s 2h 55m Intermediate

Viewers:

Creating a different menu design for small screens provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes

Subject:
Web
Software:
WordPress
Author:
please wait ...