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.

More space between menu and content

This is perhaps a personal preference, but I prefer a little more space after the navbar. I added this to the _navbar.css file we created :

.navbar {
  margin-bottom: 10px;
}

With the extra space I liked the look of a slight box shadow:

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

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

Parallax WordPress Hero Tutorial

Check out the front page to see this in action. This style of parallax works great as a front-page “Hero Image”. It’s coded with just some CSS. It does however require you to make some coding changes to the template, and because your template file WILL be different from mine you should only do this if you understand the code enough to make the relevant changes. In this tutorial, we will be making all the changes in the front-page.php file. Your theme may not have this file… If that is the case I would recommend copying the index.php file and renaming the copy as “front-page.php” this template affects ONLY the main page. Remember to copy this into your child theme folder.

Source a cover image for the Parallax Header

Firstly, find yourself a great cover image. Some space on the left, right, or center of the image will allow you to have a clutter-free area for the text and button. Check out Pexels, Unsplash, and Pixabay who each offer free stock images or illustrations that might work for your needs., I personally LOVE vectorstock.com – you can get quality illustrations (with .ai .eps .jpeg versions of each file and it costs just $1 per image if you buy a credit pack) Vector stock is where I downloaded the image on our front page if you wanted to use the same one.

You will likely need to make a few changes to the image, we will be using the CSS “cover” which makes the image always display at 100% width, this causes the image to be cropped, sometimes significantly when viewed on different sizes of screen. Make sure the main focus of the image is near the center or slightly offset if you plan on having text on the left or right side of the image. Also make sure a good portion of the edges is background, or un-important enough that cropping will not matter. Have a look at the rough example below.

Target Image size for cover css

Add the HTML Structure

Next, we are going to create the HTML structure. Load up the front-page.php file. Your file is likely different from mine, so you may need to adjust this a little, lets take it slowly, first off look at the template for the function that calls in the header template. It will look like this :

<? get_header(); ?>

This outputs your header and your menu – immediately below this we want the parallax hero section, paste this code making the relevant changes to the text. Warning: your template file may have extra logic and PHP code, you will need to find the right place to put this code in your own setup.


<div class="paralax-a">
  <header id="para">
	<div class="hero-text">
            <h1>TheWPGeek.com</h1>
            <p>Web Development - with a focus on WordPress</p>
        <div class="wp-block-button is-style-fill"><a class="wp-block-button__link">Learn to make this Parallax Header.</a></div>
     </div>
  </header>

The observant among you will notice that this code does not close the initial <div> tag. This will need to be closed AFTER the content on the page has been output. In the same front-page.php file you will find some code that looks like this :

<?php
get_footer();

Just above that, we need to close out initial <div> so it will now look like this :

</div>
<?php
get_footer();

Now we need to load up the style sheet, usually style.css in your child theme folder.

Add the CSS code

Before we paste this code take a look at your front-page.php file, and see what your theme has named the <main> tag, here is mine :

<main id="primary" class="site-main">

if you do not have an id, add one called primary (id=”primary”).


.paralax-a {
	height: 200vh;
	max-height: 100%;
	overflow-x: hidden;
	perspective: 1px;
	perspective-origin: center top;
	transform-style: preserve-3d;
	padding: 0 40px;
}

#para {
	height: 50vh;
	background: url("/wp-content/uploads/2021/06/hero-copy.jpg");
	background-size: cover;
	background-position: center center;
	position: relative;
	vertical-align: top;
	transform-origin: center top;
	transform: translateZ(-1px) scale(2);
	box-shadow: rgba(0, 0, 0, 0.6) 0px 30px 50px -12px inset,
		rgba(0, 0, 0, 0.6) 0px 15px 32px -18px inset;
	background-color: rgba(255, 255, 255, 1);
}
#primary {
	height: 100%;
	background: white;
	transform: translateZ(0);
	padding: 10px 0;
}
.hero-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 70%;
	transform: translate(-50%, -50%);
	color: white;
}

Upload the hero image to your media library, and then copy the url and paste it into the stylesheet replacing this :

background: url("/wp-content/uploads/2021/06/hero-copy.jpg");

the alignment of the text is controlled by this in the .hero-text CSS

left: 70%;

30% pushes it to the right, 50% will align to the centre. For my image 70% aligned the image perfectly for my needs.

Notes

As this CSS code is not used elsewhere on the site you could also add it to the page itself.

As my text is not directly in the middle it does not work well on small screens, we will need to add a media query to either centralize the text or resize accordingly. For me, text in the middle does not work as it becomes cluttered with the image, I made the decision to remove the text completely from the image. A better solution would be to use a grid layout for the text, and a media query to change the column layout for small screens.

@media only screen and (max-width: 600px) {
	.hero-text {
		display: none;
	}
}