Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adjust responsiveness
Tagged: responsive
- This topic has 11 replies, 3 voices, and was last updated 8 years, 9 months ago by ghog.
-
AuthorPosts
-
June 2, 2015 at 4:39 am #154513ghogMember
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/1PZUMAIJune 2, 2015 at 5:14 am #154516SavvyJackieMemberHi,
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. 🙂
June 2, 2015 at 5:15 am #154517June 2, 2015 at 5:35 am #154520SavvyJackieMemberSure, 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
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. 🙂
June 2, 2015 at 8:16 am #154544ghogMemberAwesome thanks Jackie
June 2, 2015 at 8:37 am #154546ghogMemberhmmm 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
June 2, 2015 at 8:57 am #154547SavvyJackieMemberNo. 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. 🙂
June 2, 2015 at 7:22 pm #154626ghogMemberoh 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.
June 3, 2015 at 3:06 am #154683upthinkParticipantActually 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.
June 4, 2015 at 12:13 am #154801ghogMemberHey thanks for the feedback Upthink but I made the changes as you suggested and I am still experiencing the problem.
June 4, 2015 at 1:52 am #154820upthinkParticipantYes 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-areaThen in there change the width to a bigger value (it's 840px now - make it something like 890px)
June 8, 2015 at 12:02 am #155311ghogMemberthanks 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/1KVVtYvthanks
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.