Menu Background

[rbrown08Participant Post count: 37]

I’m having a couple of problems configuring my css to make my navigation bar the way I need and I hope someone can help me out or point me in the right direction:

I want the bar to extend the entire length of the site.  If I change the wrap width to 100% and the header width to 100% then each  page’s content floats to the left of the screen and is no longer centered on the page.
My menu highlight image isn’t working properly and I think it must be a transparency issue, but I don’t know what code I need to fix to make it appear the way it should.  The green image is actually longer than it is appearing on the site and fades towards the bottom.

The site where you can see how the menu should look is:  http://lanadil.com

My WP development site is:  http://lanadil.evibedesigns.com

 

---

@Roxann3Brown

[rbrown08Participant Post count: 37]

Looks like I figured out the correct CSS settings for my menu highlight.  I still need guidance on making my nav bar extend the entire width of the page without affecting the alignment of the inner elements.

---

@Roxann3Brown

[rbrown08Participant Post count: 37]

This is probably such a simple answer, but I still can’t find out how to make it happen:

How can I get the navigation menu to extend the length of the page?

---

@Roxann3Brown

[Jon BellahParticipant Post count: 108]

This is a bit of a tricky one, because it requires a lot of different changes to your CSS. But here are the changes you want to make:

Add this to your body.home class.

body.home {
margin:0;
}

Remove the width line from #wrap so it reads as:

#wrap {
margin: 0 auto;
}

#header should read as follows:

#header {
width: 990px;
height: 50px;
margin: 0 auto;
}

Add the following to your stylesheet in the Navigation section:

#nav .wrap {
width: 990px;
margin: 0 auto;
}

That should do it.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[rbrown08Participant Post count: 37]

Jon, Thank you so much!  That just about did it, I made a couple of changes such as:

didn’t use:

#nav.wrap {
width: 990px;
margin: 0 auto;
}

for some reason that broke the navigation.

Added:

#inner {
width: 990px;
margin: 0 auto;
}

#.home #inner {
width: 990px;
margin: 0 auto;
}

I made a few minor adjustments to the margins on the ul and it’s looking good!  Thanks again, I learned something new today and now I should be able to make full width navigation menus  I knew it involved a few different areas of the css, but I couldn’t narrow it down.

 

---

@Roxann3Brown

[Jon BellahParticipant Post count: 108]

No problem! Glad that helped.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[Author]

Posts