Full width nav for stretched theme

[Zoe Snyder]

I am trying to get a full width menu on a site that use the Stretch Starter theme. This site has the menu I want: http://www.forbesnutritionalconsulting.com/ and it uses the Boxed theme. Can I get a full width nav with Stretch Starter theme? Is it matter of a function?

I’ve done a side-by-side firebug comparison and it all looks the same. (nav #access is in #top .content).

What am i missing? Thanks!!

Topic

[Jason Bobich]

Hello Zoe,

This would be a CSS customization from your child theme’s style.css that you’ll make. Currently the stretch starter theme CSS is structured in a way where it’s wrapping a width around the entire header section (menu included) and then centering that. You can see this being setup at the top of the style.css of the starter child theme you’re using.

You need to use your inspector (i.e. Firebug, Google Chrome’s dev tools, etc), and look at how the HTML markup is structured. Then from there, you’ll wan to decide how you want to structure those elements that make up the header so that a container around the main navigation (most likely the nav#access element), can stretch the full width of the browser window, while the inner portion of the navigation is what you apply a width to, and then center.

[Zoe Snyder]

Hi Jason,

Thank you so much for your thorough reply pointing me in the right direction. After a few back and forths, my ever expanding css brain got it! (and so did the site get a full width nav bar)

Zoe

[Jason Bobich]

Awesome, glad you figured it out. For whatever it’s worth, it’s looking like for the final design of Jump Start 2.0’s default look, there is a stretch navigation, where the background of the menu bar stretches full width.

[Author]

Replies