Adjust responsiveness

[ghog]

When I reduce the width of my browser the menu collapses across two rows before it is necessary to do so. Is there a way to control this?

Thanks

http://j.mp/1PZUMAI

[SavvyJackie]

Hi,
I would investigate what factors are controlling that. I usually start with the Inspect Element tool in my browser to explore what classes and containers are controlling the behavior. From there, I can modify my stylesheet in the @media queries section to make adjustments.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[ghog]

thanks Jackie but could you please explain to me what the @media queries section is?

[SavvyJackie]

Sure, it is a section in your style.css (usually found near the bottom) that has display rules for different viewport widths (screen sizes).

Here is some basic info on it:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[ghog]

Awesome thanks Jackie

[ghog]

hmmm honestly I am struggling with this. i made changes to the @media max width sizing but it had no effect at all on the menu. is there something else that could affect this?

thanks

[SavvyJackie]

No. But I just tried adding this block to your @media query section of 1140px and it changed things so the menu is under the logo.

.content,
.sidebar,
.site-header .widget-area,
.title-area {
	width: 100%;
 }

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

.header-image .site-title > a {
	margin: 0 auto 10px;
	padding: 0;
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[ghog]

oh ok, i don't actually want the logo under the menu. all i am trying to achieve is that the menu does not collapse onto 2 rows when the browser is slightly reduced. currently there is a lot of space between the logo and the first menu item. additionally I would prefer if the mobile menu displayed instead of the menu collapsing onto two rows.

[upthink]

Actually I believe the problem is your logo - it needs to be cropped correctly. Right now it has a ton of empty space on the right side - so even though it seems that the space between the logo and the nav is empty - it is not empty and is actually part of the logo. As soon as you resize the screen a little bit the menu breaks into 2 lines because there is no space to keep both the logo and the complete menu in a single row.

[ghog]

Hey thanks for the feedback Upthink but I made the changes as you suggested and I am still experiencing the problem.

[upthink]

Yes that is because in your css now you need to make the header right sidebar wider. So find this in your css:
.site-header .widget-area

Then in there change the width to a bigger value (it's 840px now - make it something like 890px)

[ghog]

thanks Upthink but I tried your changes and it just made the menu div wider but didn't really solve the issue. The menu still collapses into 2 rows when i even slightly reduce the browser window. I am really hoping someone can help me with this a week on as I have never really experienced this problem with other themes and frameworks.
for anyone that has an idea please see a screen shot of the issue here: http://j.mp/1KVVtYv

thanks

[Author]

Posts