#4 Fixed Navigation Bar

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;}.

.menu {
	float: left;
}

#access {
	background: #000000;
	float: left;
	margin: 0 auto 1em;
	width: 100%;
	height: 41px;
	position:relative;

}
#access ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#access li {
	margin:5px 0;
	float: left;
}
#access a {
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	margin: 2px;
	display: block;
	line-height: 2em;
	padding: 0 1em;
	text-decoration: none;
	color:#ffffff;
	text-transform: uppercase;
}
#access ul ul {
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #dedede;
	line-height: 1em;
	padding: .5em .5em .5em 1em;
	width: 10em;
	height: auto;
}

#access ul ul a:hover {
	background: #cecece;
}
#access ul li:hover > ul {
	display: block;
}

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 ‘};’

var menuOffset = $('#access')[0].offsetTop;
	$(document).bind('ready scroll',function() {
	var docScroll = $(document).scrollTop();
	if(docScroll >= menuOffset) {
	$('#access').addClass('fixed');
	$('#navLogo').addClass('open');

	} else {
	$('#access').removeClass('fixed');
	$('#navLogo').removeClass('open');

	}
	});

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):

<nav id="access" class="nav" role="navigation">
			<div id="inner-nav">
				<h1 class="assistive-text section-heading"><?php _e( 'Main menu', 'toolbox' ); ?></h1>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'toolbox' ); ?>"><?php _e( 'Skip to content', 'toolbox' ); ?></a></div>

				<span id="navLogo"><a href="<?php echo home_url(); ?>"></a></span>

				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</div>
		</nav><!-- #access -->

Please note this function:

<a href="<?php echo home_url(); ?>"></a>

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:

.nav{
	position: relative;
}

#inner-nav{
	display: block;
	width: 1000px;
 	position: relative;
	margin: 0 auto;
}
#access.fixed{
	position:fixed;
	z-index: 9999;
    left:0;
    top:0;
    width:100%;
}

#access.fixed ul{
     display: block;
 }

Next for the sliding logo add this code:

#navLogo{
 	float:left;
 	display: block;
 	width: 0px;
	overflow: hidden;
	-webkit-transition: width .2s ease-in;
	-moz-transition: width .2s ease-in;
	-o-transition: width .2s ease-in;
	transition: width .2s ease-in;
 }

 #navLogo.open {
	display: block;
	width: 218px;
}

 #navLogo a {
	display: none;
	padding: 2px;
	width:188px;
	height: 18px;
	background: url(/wp-content/uploads/2013/11/minitft.jpg) no-repeat;
	margin: 9px 15px;
	background-size: 188px 18px;
}

#navLogo.open a {
	display: block;
}

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.

DAY 4 COMPLETE!

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!

The post #4 Fixed Navigation Bar appeared first on The Fashion Technologist.