Jump to content
Sign in to follow this  
illinimatt81

Make Navigation Bar Span Entire Window

Recommended Posts

illinimatt81

I am looking to make the navigation bar span the entire window rather than just the content area as it currently does. Here is a a visual description of what I would like to achieve http://www.screencast.com/t/sXPbPRWpFYw My navigation bar plug in is set to go full width but it seems there is some container or width restriction on it from the theme I need to adjust. Any thoughts?

Share this post


Link to post
Share on other sites
illinimatt81
I found a backdoor way to do it, but I am still curious as to how I can make the navigation bar span the site without having to do what I did below. Appreciate any feedback. I added the following custom css code: #nav, #nav .content-pad, #secondnav .content-pad { background-image:url('http://runneracademy.com/wp-content/uploads/2012/04/menubar.jpg'); background-repeat:repeat; padding-top: 0px; /* <--- Lower the number below to reduce the space */ padding-bottom: 0px; /* <--- Lower the number below to reduce the space */ } The menubar.jpg is an image I created by using Snagit to take a small slice of the gradient used in the menubar and saved it as a jpg. I then set it as the background for the #nav, #nav .content-pad, #secondnav .content-pad and had it repeat across. The effect accomplishes the look of the navigation bar spanning the window. Again, still would like to know if the actual nav bar can be made to span the window.

Share this post


Link to post
Share on other sites
catrina
In order for the actual nav bar to span the window, the DIV container it's in would need to be adjusted so that it's width is set at 100% and then you'd use the same code you're using to repeat the gradient in that code. For further info on CSS width, please see here: http://www.w3schools.com/cssref/pr_dim_width.asp. I checked your site and the approach you used seems to be working fine so you can stick with that if the other CSS approach with the width adjustment doesn't work.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×