Continuing on from the start of my experimenting with SASS and WordPress themeing, I’m now looking at adding some CSS to add a simple black line to separate the top navigation from the rest of the page.
I’ve gone back to my _768up.scss file and added the following code to the header section:
This will allow me to then add a div tag where I want the banner line to appear:
I logged into my WordPress admin and when to Appearance -> editor -> header.php and added the code just before the closing head tag.
Which is not quite what I wanted. So I moved the code from header.php to page.php:
Much more like it!However, I’m not sure I want it to appear as a rectangle. So I’ll try a single line. I went back into my 768up.scss file and changed the padding property of div#banner to 0px:
I quite like that, so I’ll keep it.
A couple of things caught me out here. This separator won’t appear on the posts page – so I went to index.php and added my div tag there. However – it then won’t appear when you click on an individual post. So again, I’ll add the code in the editor, this time to single.php.
Voila! A consistent simple bit of layout change. I was looking to do an image for the top banner – but I’m putting that aside for the time being whilst I source a quality image.