Coding Nav Menu Buttons - jpjohnsonjr/learning-notes GitHub Wiki

About

These are some lines of code found in the Lecture 32 after folder:

  • See ca. Line 38 the <div id="collapsable-nav"... element and attribute.
  • Required classes: collapse and navbar-collapse.
  • Using an unordered list is a common way to create menu navigation buttons. Give ID nav-list. Classes nav and navbar-nav indicate that this will be component of a menu. Turn an un-ordered list into a menu.
  • The class navbar-rightis similar topull-left` except is specifically for navbar. Floats all the way to the right.
  • Each menu item is an <li> element with an <a> element and a <span> tag with classes that bring in an icon font: glyphicon and glyphicon-cutlery. Vector-based image that behaves the same way a font behaves. Several glyphicons come with Bootstrap.
  • Also includes a <br> with a class that makes it go away when it is extra small.
  • Using <a href="tel: ..."> will cause the number to activate if selected. Hides when extra small because it will appear in another location.

Styling the collapsible button

These are things that were done with it:

  • Borders
  • Adjusting yellow line by adding clear property
  • Adjusting font size for smaller screen by applying a negative margin
⚠️ **GitHub.com Fallback** ⚠️