Coding Basics of Navbar Header - jpjohnsonjr/learning-notes GitHub Wiki

Reference

See course materials, Lecture30/after folder.

About the <header> element

<header> is a semantic HTML5 element. Example of parts:

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default"> 
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="">
            <div id="logo-img" alt="Logo image"></div>
          </a>

      </div>
    </nav>
  </header>

Two classes provided by Bootstrap: navbar and navbar-default. This is typical of Bootstrap: navbar is a "base class"; navbar-default is a subclass that shares some properties of the navbar.

Note that the navbar has rounded corners, if you look closely.

Uses container class instead of container-fluid class. Difference between the two:

  • The container-fluid class stretches all the way to the edges of the browser and has a bit of padding on both sides, about 15px.
  • The container class changes width depending on the width of the browser. Will NOT stretch all the way to the sides.

Note also that the container is inside the nav element so that the nav bar can be colored to stretch across the screen and content in it can be more constrained.

The ID #header-nav assigned to it and then in the CSS this code:

#header-nav {
  background-color: [desired code];
  border-radius: 0; [gets rid of rounded corners]
  border: 0; [no border]
}

<navbar-header> groups brand and toggle for better mobile display.

Inserting image inside of <a href="index.html" class=""> will make the logo clickable so that clicking on it always brings you back to the front page. Note that rather than linking to the icon directly, the header refers to a CSS ID, #logo-img. Then, this is placed in the CSS:

#logo-img {
  background: url('../images/restaurant-logo_large.png') no-repeat;
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 0;
}

Bootstrap-specific elements

<div class="navbar-brand">

Wrapper to put any branding / logo in.

Small logo does not need to be resized for responsiveness.

In order to float left, Bootstrap uses a class called "pull-left". Need to style for font and to get rid of default underlining on link by using text-decoration: none;.

In Bootstrap, adding class visible-md will make it only visible when the screen size is medium, similarly for lg, sm, xs.

Tips and Tricks

New browser-sync command to learn: Sync not only folders, but also folders inside that folder:

browser-sync start --server --directory --files "**/*"

Need to also create a page / notes for installing fonts from Google.

Don't forget also <meta> tag to make sure everything will appear full-scale on a mobile phone:

<meta name="viewport" content="width=device-width, initial-scale=1">
⚠️ **GitHub.com Fallback** ⚠️