Navigation breaking over two lines on iPad

[SamBell]

Hi guys, I am still looking for an answer for this question. I'm working on http://ditchthedietbootcamp.com with parallax pro and I want to make the navigation menu stay on just one line, or even change to the dropdown menu like it does on mobile, when viewing on iPad. Right now, it is breaking over two lines.

Can someone tell me how to fix this?

Thanks,
Sam

[rfmeier]

Sam,

At line 1677 within you style.css file, change width: 650px; to width: 100%;, then add the code I pasted below that css block.

.genesis-nav-menu,
.site-header .widget-area,
.site-title {
	text-align: center;
}

---

Ryan Meier – Twitter

[SamBell]

Hi rfmeier!

Thank you for responding. I am having some troubles though. Line 1677 is blank and is in the middle of the comment CSS section. I also searched my whole stylesheet for width: 650px; and didn't find anything??

Any thoughts?

Thanks,
Sam

[rfmeier]

Sam,

Are you using any service to compress your stylesheet?

---

Ryan Meier – Twitter

[rfmeier]

Sam,

The style.css file I can inspect through Chrome is for the theme Ditch The Diet.

.site-header .widget-area {
     width: 560px;
}

The block of code above is where the widget-area is constrained to 560px (this is actually sitting within a media query). Changing this to 100% will force the whole menu under the title.

Adding the code I earlier posted right under the .site-header .widget-area will center the elements.

---

Ryan Meier – Twitter

[SamBell]

Hi Ryan,

I don't think I am using a compression service. If I am, it's accidental.

Ok great, that worked! I am just wondering through, how do I change the space between each of the nav links on iPad in landscape? They are all on one line now, but they are sitting down on the 'second' line which covers half of the page title.

[SamBell]

Fixed it! Thanks so much for all your help Ryan, I really appreciate it!

[rfmeier]

You are welcome. Good luck!

---

Ryan Meier – Twitter

[Author]

Posts