Full-width navigation bar in Blissful

[krystyn]

I'm trying to get my navigation bars to go all the way across the screen, like a full screen navigation bar, however it's not working. I'm hoping somebody can help tell me what I'm doing wrong in the css, or if there is php that needs to be changed to account for it?

 

Here's my test site.

[John]

Hi Krystyn,

I just looked at your test site - could you give more detail about what you're wanting the navigation bars to do? Or did you figure it out?

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[krystyn]

Hi John-

Nope, I didn't figure it out....I've been able to do it before, so I must be missing something.

I'd like the navigation bars' background color to span the width of the screen..similar to this:

http://www.yourownhomestore.com/

[John]

The website at that link has a solid white background with no background color in the navigation. Did you mean a different site?

Correct me if I'm wrong, but I think you're wanting the blue colors of both navigation bars to extend to both sides of the screen, right?

If so, you'll need to change the width of the primary #wrap DIV to 100%, then adjust the other main DIVs to center within that, and your navigation DIVs to go full-width.

Let me know if I'm on the right track here.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[krystyn]

You are correct on both accounts...I meant to link to the blog portion of the site here: http://www.yourownhomestore.com/

 

I'll work on changing things out. I thought I had tried that with no luck, but it should work, so I'll try again.

[krystyn]

Thanks, John..now it appears I can only get the navigation centered (but now I've got the navigation correct). I've got the main #wrap position to center, but I'm not seeing it.

 

Is anything jumping out at you? I'm looking in firebug, but not seeing anything and trying to center the inner and header isn't working, either.

[krystyn]

Nevermind. I got it. Silly margins! Thanks for your help.

[John]

Good deal! And you're welcome!

#nav ul {float: none;}

will pop that search box over to the right... 🙂

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[krystyn]

Thank you! Popping it to the right now:)

 

Since this is still navigation related...why can't I change the font size? I've been in firebug for over an hour and can't seem to get the fonts to change sizes in the navigation.

[Author]

Posts