Jekyll Horizontal Nav Bar Troubles

Question

I am attempting to make a horizontal navigation bar in a jekyll site. I am not sure if the CSS I am using is incorrect, or if it's not compiling correctly with Jekyll.

Here is my current approach: - Make changes in _scss/_layout.css - Check the changes are there in _site/main.css (they are) - Check for errors in jekyll serve console (don't see any)

When I look at my generated site and hit inspect, I don't see the CSS changes being applied.

Sass code in _sass/_layout.scss:

 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

 li {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

 h1 {
 text-align: center;
 font-weight: 200;
 }

 header {
 background: $header;
 padding: 0px 15px;
 text-align: center;
 margin: 50px 0 0;
 height: 50vh;
 display: flex;
 justify-content: center;
 align-items: center;
 }

Full repo for my site is here - https://github.com/ericadohring/groupdayout/ and help would be greatly appreciated!

marcanuy marcanuy · Accepted Answer · 2017-08-27T22:32:41

Github pages isn't showing changes anymore because there is an error that prevents Jekyll to build your site.

In _sass/_layout.scss there is a property that is using an undefined variable:

header {
   background: $header;
   ...
}

To fix it just assign a value to it before using the variable, e.g.:

$header: #f0ad4e;
header {
   background: $header;
   ...
}

Now you will be able to work on your site and seeing the changes reflected in Github pages.

Jekyll Horizontal Nav Bar Troubles

1 Answers