More themeing my WordPress site with SASS – a banner to separate the top navigation

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:

banner css code

This will allow me to then add a div tag where I want the banner line to appear:

<div id=”banner”></div>

I logged into my WordPress admin and when to Appearance -> editor -> header.php and added the code just before the closing head tag.

The result:

banner at top

Which is not quite what I wanted. So I moved the code from header.php to page.php:

banner at bottom

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:

single line banner

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.

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Reload the CAPTCHA codeSpeak the CAPTCHA code