Today, I focused my attention on the navigation bar. I was able to meet the following goals:

• Put some white space between the logo and the icon
  • padding property
• Space out links within the navigation
  • Bootstrap’s Navbar article under Brands headed me in the right direction but W3School’s Bootstrap 4 Navs and Shuffle for Bootstrap’s ul.nav helped me recognize the class .nav-link ensured equal spacing. I believe it also helped fill the entire width of the browser, something I noticed earlier wasn’t automatically resizing after I made the browser smaller.
  • Speaking of resizing browsers, I found this neat tool, How Big Is My Browser?, which helped me determine pixel sizes!
• Used the font-weight to increase the size of the links
• Attempted to apply the @media rule to resize the links after the browser reaches a specific size in pixels
  • I found help through W3School’s CSS @media Rule. I noticed they gave a tip for multiple @media resizings which I’ll most likely have to look into tomorrow or the next time I work on this page. I was hoping to include multiple rules here but I noticed it only would use one at a time.

Photo by StockSnap on Pixabay.