Finishing off our Header - Sage tutorial

Our header has come a long way from that early unordered list, but we should finish off our styling and ongoing issues before we continue.

Hamburger Menu in Sage not displaying

So this was an issue I had – and it seems others have also, but it’s worth checking to see if this even an issue for you before you apply my fix. If you resize your window do you see the Hamburger Menu? if not, then it seems to stem from a fix applied for a bug which to my knowledge doesn’t need fixing in the latest version of Bootstrap. Load up resources/styles/_variables.scss and comment out the last 2 lines :

/** Bootstrap navbar fix (https://git.io/fADqW) */
// $navbar-dark-toggler-icon-bg: none;
// $navbar-light-toggler-icon-bg: none;

We also need to add the following class to the nav in header.blade.php “navbar-dark”

<nav class="navbar navbar-dark navbar-expand-md nav-custom sticky-top" role="navigation">

Your mobile menu should now appear.

Better accessibility with higher contrast

The color I chose for the navbar is between dark and light. The default Bootstrap styling assumes a darker background and creates links that don’t have the required contrast. You may not have this issue if your navbar is a different color to mine. To fix this we have to use an !important tag. In our _navbar.scss file :

.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

the default opacity is 0.5, I increased mine to 0.9 which will pass accessibility tests, but you could use plain white instead and save a few characters in the css file like this :

.navbar-nav .nav-link {
  color: #fff !important;
}

Change dropdown background

I changed my mind and went for a lighter color for the dropdown, in _navbar.scss I changed to this :

.dropdown-menu {
  background-color: #2c2455;
}

Fix sticky header with admin bar

The space the admin bar takes up causes a display issue with the sticky header. This CSS code will fix it on mobile and desktop version of the site.

body.admin-bar .sticky-top {
  top: 32px;
}

@media all and (max-width: 782px) {
  body.admin-bar .sticky-top {
    top: 0;
  }
}

Change search icon color

I removed the class (text-white) that changed the icon to white, from header.blade.php to fix contrast issue.

      <span class="input-group-text" >
        <i class="fas fa-search"></i>
      </span>

Re-organize colors.

I like to build out sections and play with the colors, once I am happy with them I will rename them and create variables for them. Now I have decided on 2 theme colors in the menu, I will call these primary and primary-dark. It’s now time to set these up so we have access to them throughout the tutorial. The best thing with developing this way is we will be able to quickly alter the theme colors from one file in the future.

in resources/styles/common/_variables.scss Sage already has this ready to go – so lets just make a few changes, this is my file now :

$theme-colors: (
  primary: #483c8a,
  primary-dark: #2c2455,
  secondary-yellow: #dea226,
  navtop: #f5f5f5,
);

and we reference each of these colors like this :

  background-color: theme-color("primary-dark");

Lets go through our _navbar.scss file and make any necessary changes. Here is my file now :

.brand {
  margin-right: 2rem;
  font-size: 1.2em;
  text-decoration: none;
  color: black;
}

.top-header {
  padding: 10px;
  background-color: theme-color("navtop");
  border-top: #202331 4px solid;
  box-shadow: rgba(0, 0, 0, 0.1) 0 30px 50px -12px inset;
  box-shadow: rgba(0, 0, 0, 0.3) 0 15px 32px -18px inset;
}

.nav-custom {
  background-color: theme-color("primary");
}

.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.nav-custom a {
  color: white;
}

.dropdown-menu {
  background-color: theme-color("primary-dark");
}

.social {
  color: theme-color("primary");
  transition: all ease-out 0.5s;
  -moz-transition: all ease-out 0.5s;
  -webkit-transition: all ease-out 0.5s;
  -o-transition: all ease-out 0.5s;
}

.social:hover {
  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  transition: all ease 0.5s;
  -moz-transition: all ease-in 0.5s;
  -webkit-transition: all ease-in 0.5s;
  -o-transition: all ease-in 0.5s;
}

.facebook:hover {
  color: #4267b2;
}

.twitter:hover {
  color: #1da1f2;
}

.youtube:hover {
  color: #c4302b;
}

.pinterest:hover {
  color: #c8232c;
}

.instagram:hover {
  color: #fada5e;
}

.navbar {
  margin-bottom: 10px;
  box-shadow: rgba(17, 17, 26, 0.2) 0 2px 3px;
}

body.admin-bar .sticky-top {
  top: 32px;
}

@media all and (max-width: 782px) {
  body.admin-bar .sticky-top {
    top: 0;
  }
}

We can now reference these colors in lots of places yet have one central area to make color changes.

In our next instalment we will be working with sidebars