Community Forums › Forums › Archived Forums › Design Tips and Tricks › Navigation on Header right widget area not responsive
Tagged: header right, lifestyle Pro, navigation, responsive
- This topic has 12 replies, 4 voices, and was last updated 9 years, 1 month ago by abyghale.
-
AuthorPosts
-
February 16, 2015 at 5:37 pm #141055abyghaleParticipant
Hi, I need help! Thank you in advance.
I placed my navigation bar on the header right widget area but it is not responsive, unlike how it appears on the demo (Lifestyle Pro) when the navigation area is in the Primary and Secondary locations.
I have been trying to figure it out but I really can't see how.
I appreciate your help!
http://www.imtwa.comFebruary 17, 2015 at 2:22 am #141080LeifParticipantI took a peek at the style.css on the demo site and around line 1143 after Secondary Navigation there should be a whole section that looks like:
/* Responsive Menu --------------------------------------------- */ .responsive-menu-icon { cursor: pointer; display: none; text-align: center; } .responsive-menu-icon::before { content: "\f333"; display: inline-block; font: normal 20px/1 'dashicons'; margin: 0 auto; padding: 10px; } .site-header .responsive-menu-icon::before { padding: 0; }
I noticed that is missing on your stylesheet, so unless you moved that code elswehere, it may have been accidentally deleted while making edits. Hopefully it's a start.
February 18, 2015 at 1:13 pm #141233abyghaleParticipantThank you!
I have just added it but it still is not working. However, I am checking what could be wrong. Please tell me if you find any. Thanks again!
February 18, 2015 at 3:13 pm #141244abyghaleParticipantI cannot see what is still wrong 🙁
Custom navigation bar at the header right widget is still not responsive.
February 18, 2015 at 3:39 pm #141248LeifParticipantCompare the style.css file you've been editing with a fresh LifestylePro's style.css file. Especially look towards the bottom in the media queries section around the area
@media only screen and (max-width: 767px)
where you should see classes for responsive menu that look like:.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { display: block; }
You can also try deactivating all plugins and turning on one by one to see if there's a conflict.
February 20, 2015 at 12:12 pm #141500abyghaleParticipantWhat seems weird to me is that I have been looking at the raw lifestyle pro css and i did not find these codes that you gave me 🙁 still trying to figure it out but if you can think of some possibilities why this is happening please tell me. Thank you!
February 20, 2015 at 12:32 pm #141511abyghaleParticipantI really cannot find out why the navigation bar would lose its responsiveness when moved to the header right widget area. I just did a quick fix for now, used the secondary navigation. If I can put the logo over the navigation bar would be great so that it would appear the way I initially want it but for now this would work. Thank you very much for your help!
February 20, 2015 at 8:37 pm #141597LeifParticipantI'm just using Firebug on Firefox to look at the Lifestyle Pro demo's style.css That's where I'm getting the code.
Was the responsive menu working before you started editing the child theme files?
And have you been keeping track of your edits?If so, I'd recommend saving your current child theme with the edits (style.css and any other files you've edited) into a folder on your computer. Then go ahead and install a fresh copy of your child theme (overwrite via FTP) and make sure everything is working as it should. If everything checks out ok, start adding your edits back in checking/testing frequently to maybe see where things went wrong.
It looks like you're early enough into your customization to go back and do this to make sure things are right from the outset. It may save you some headaches in the future, especially when it comes to updates.
February 21, 2015 at 10:40 am #141647Victor FontModeratorI fixed this on another site I was working on. When you place the menu in the header, the class changes to header nav. It is no longer primary nav. I work on so many sites that I can't remember on which site I fixed this, but what I did was was write a little piece of jQuery code to rename the class for header nav back to primary nav and everything worked.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?February 21, 2015 at 11:15 am #141654DTHkellyMemberOr use this free plugin with header nav widget that changes the class:
https://github.com/GaryJones/genesis-header-navFebruary 21, 2015 at 7:57 pm #141690LeifParticipantGreat info on the class changes and plugin.
From what I can tell, it doesn't look like the menu is in the header, though. Or in the header widget. Unless I'm missing something, the classes assigned to this nav element show
menu genesis-nav-menu menu-secondary
. The menu does collapse with smaller screen sizes, but the responsive menu icon never shows up.February 21, 2015 at 10:39 pm #141702abyghaleParticipantThank you so much for all your responses! I will be working on the site again perhaps after the weekend.
Yes, at this time it shows the secondary menu because I couldn't make it responsive when I place it at the header right widget.
Will update when resolved.
February 23, 2015 at 2:45 pm #141910abyghaleParticipantJust an update on what I have done on the site... It is now using the header right widget for the navigation bar. It seems to be responding now but still not perfect. Will see how to make it work the way I really want it.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.