Fixing Navbar Layout, Text, and Dropdown Menus - jpjohnsonjr/learning-notes GitHub Wiki

Tricks

  • Made logo smaller on smaller devices by switching out logo
  • Use a different font unit for smaller devices: font-size: 5vw where vw stands for "viewport width". One unit of vw is 1% of viewport width. This is a responsive width. Makes font size responsive to viewport width.
  • Decrease Kosher Certified font.

Bootstrap default breakpoints:

  • Large devices: @media (min-width: 1200px)
  • Medium devices: @media (min-width: 992px) and (max-width: 1199px)
  • Small devices: @media (min-width 768px) and (max-width: 991px)
  • Extra small devices: @media (max-width: 767px)

Styling Dropdown menus

  • Investigate why glyphicon size is different from text: Getting font size from different places.
  • Add margin between glyph icon and text.