#4 Fixed Navigation Bar

Amy Marsh Is A Fashion Technologist In Training

Fixed Nav

During this task I repeatedly asked my computer screen “WHY?!”, gained a hatred for Safari for no real reason and did a little dance when my fixed navigation bar finally worked. It was eventful but it was never impossible, I had a break to watch Downton Abbey in between which helped my concentration and made me question how difficult it apparently  is to carry water to pigs (expect to be covered head to toe in mud by the end- life lesson learnt!).


Once complete I scrolled up and down on the page watching the logo open and close and open and close… for at least half an hour- you’ll understand when you complete this task!


So let’s get started!


I started by making the navigation bar look how I wanted it to look. The navigation bar has an id of access in this theme so I edited the style.css file code that already existed with the labels #access. ‘#access’ is the navigation bar box so I changed the background and font colour as well as gave it a position relative. ‘#access a’ are the navigation link, here I have changed the font to Raleway and made the letters all uppercase. Along with adding a small margin to the ‘#access li’. Just above the ‘#access’ CSS I added the .menu {float: left;}.



After this I added the script to the main.js file, I did this by entering this code at the bottom of the file just before the final ‘};’



Next I edited the header.php file to include an inner nav div and span for mini logo include in the fixed navigation bar. In between  the <nav> </nav> tags it should now look like this (you can copy and replace your code with this new code):



Please note this function:

Adds a link to the homepage of your website through php.


Now I can style the fixed header, first add the mini logo you wish to appear to your media selecting media in the left side bar and then add new, we will come back to adding the image to the site later.

First for the css styling add this code to the css:



Next for the sliding logo add this code:



Make sure you add the background image URL of your image you have uploaded in the site in replace of mine. Also you will have to change the height and width to match your image as well. It is important to take note that the width of the ‘#navLogo.open’ includes the width of the image as well as the margin which has been added to it.



Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!


Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

One thought on “#4 Fixed Navigation Bar

  1. Pingback: #6 Fixed Scrolling Social Buttons | The Fashion Technologist

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">