From the course: Dreamweaver CC: Responsive Design with Bootstrap 4

Improve usability on small screens - Dreamweaver Tutorial

From the course: Dreamweaver CC: Responsive Design with Bootstrap 4

Start my 1-month free trial

Improve usability on small screens

“

- [Instructor] Like all components in Bootstrap, the nav bar is responsive. On medium, small and extra small devices, these links and drop down menus are hidden. On the default grid that means anything less than 992 pixels wide. In the grid we defined for this site, the transition occurs below 960 pixels. We can resize the document window either by dragging the live view scrubber to the left, there's that transition, or we can use visual media queries bar by clicking anywhere up there, snaps to that break point and the links have been hidden. They are replaced by this hamburger icon on the right. If you click that in live view, it toggles the menu open and closed and it's now a vertical menu. Now this is a fairly widespread conventions toggle in navigation menu open and closed, but it's not immediately obvious to everyone. So it's a good idea to add some text along side the icon to improve usability. So with the icon selected in live view, if we look in code view, we can see that it's this span with the class nav bar toggler icon. And it's actually an empty span. The icon is generated by CSS, It's an SVG background image. So, if for some bizarre reason, CSS is turned off or fails to load, there's no indication of how to access the menu. So, insert your cursor just before the span and then type menu. And if necessary, click inside live view to refresh and now we've got some useful text along side that hamburger icon. I think it's a simple, but very effective enhancement to the nav bar's usability. Talking of usability, I noticed a little bit of a problem with my menu, so I'm going to double click to fit the full width and I think it would be far more logical to have this what to see drop down menu before activities because it comes after getting there. So, what I'm going to do is go into the dom panel and select that drop down menu. That's the first one, it's the second one I want to get hold of, so there is the second one. I've got the list items, so that's the whole drop down menu including it's trigger. I'm going to right click and select cut. Then I'm going to go to the first one, It's already selected that automatically. I'm going to paste, so I can't paste before, I need to paste after another item. So, it's the next nav item I need to select that list item there, right click and then paste, not paste as child, but paste. And it'll paste it as a sibling. So there we are, we've got getting there, what to see, and activities. So we've not only added text alongside the hamburger icon for small devices, we've also changed the order of the items in our nav bar menu.

Contents