Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro Responsive Menu Missing
Tagged: Magazine Pro, responsive menu
- This topic has 19 replies, 2 voices, and was last updated 9 years, 2 months ago by Tonya.
-
AuthorPosts
-
February 24, 2015 at 2:04 pm #142044slybugMember
My site is http://panamacitybeachonline.com
I have tried everything to get the "hambuger" or stack to show in responsive view the menu just disappears entirely.
I have tried editing the css:
To match the demo:.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon{
http://panamacitybeachonline.com
display: none changed to anything else and the whole menu appears not the stackFebruary 24, 2015 at 2:19 pm #142052slybugMemberoh I also just recently reinstalled the style.css with the orginal one and still nothing
February 24, 2015 at 3:37 pm #142073TonyaMemberHi there,
The style.css is much different than the latest Magazine Pro. Not sure why if you reinstalled the original one.
Regardless you have the following issues occurring:
1) Your responsive-menu.js file is adding an ID and not a class. Therefore, the styling needs to target #responsive-menu-icon instead of .responsive-menu-icon.2) On line 1491 of your style.css, you need to add display: none; to hide the responsive-menu-icon until you hit the mobile breakpoint.
3) Then on line 2118-2200, you can replace these lines with this:
.genesis-nav-menu > .first > a { padding-left: 20px; } .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { display: none; } .genesis-nav-menu.responsive-menu .menu-item, #responsive-menu-icon { display: block; } .genesis-nav-menu.responsive-menu .menu-item { margin: 0; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu a { line-height: 1; padding: 18px 20px; } .genesis-nav-menu.responsive-menu .menu-item-has-children { cursor: pointer; } .genesis-nav-menu.responsive-menu .menu-item-has-children > a { margin-right: 60px; } .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f347"; float: right; font: normal 16px/1 'dashicons'; height: 16px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f343"; } .nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { color: #fff; } .genesis-nav-menu.responsive-menu .sub-menu { background-color: rgba(0, 0, 0, 0.05); border: none; left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; padding: 14px 20px; position: relative; width: 100%; }
4) You need to enqueue dashicons too by putting this into the wp_enqueue_scripts callback in your functions.php file:
wp_enqueue_style( 'dashicons' );
5) Whenever you change a javascript or style.css file, you need to make sure you uptick the CHILD_THEME_VERSION number, say to 1.1 or whatever. Why? WordPress appends this version number to the end of these resource scripts to ensure whomever has already visited your website in the past gets the latest version(s). Here is an article I wrote about to help you out.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 3:59 pm #142080slybugMemberSorry I meant to say that I downloaded the latest CSS and copied over mine. To try and fix this issue it so it is the latest CSS
February 24, 2015 at 4:12 pm #142082slybugMemberOK I have done everything and still no menu...
GRR
I again downloaded the latest css in copied over mine (then copied back the custom style which was very little) Every thing that was missing I now confirmed it to be there and still nothingFebruary 24, 2015 at 4:21 pm #142087TonyaMemberMake sure you implement the changes step-by-step that I indicated above, as there is still no styling in place for #responsive-menu-icon. Remember the js is adding it as an ID and not a class.
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 4:26 pm #142088slybugMemberThis is the copy of the .js file:
jQuery(function( $ ){$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});$(window).resize(function(){
if(window.innerWidth > 768) {
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});});
it is not referring to the #responsive-menu but the .responsive-menu... I included both in the css the # version and the . version and still nothing
February 24, 2015 at 4:30 pm #142089TonyaMemberHi again,
Here is what I'm seeing on your live site in Chrome and Firefox for your responsive-menu.js file:
jQuery(function( $ ){ $(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>'); $("#responsive-menu-icon").click(function(){ $(".nav-primary .genesis-nav-menu").slideToggle(); }); $(window).resize(function(){ if(window.innerWidth > 768) { $(".nav-primary .genesis-nav-menu").removeAttr("style"); } }); });
Are you working on the live site? Or elsewhere?
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 4:32 pm #142090slybugMemberOH I have also tried disabling all the plugins and it still disappears
February 24, 2015 at 4:35 pm #142091slybugMemberI know it is bad to do this live but even a missing menu is better than what it was when I started
February 24, 2015 at 4:36 pm #142092TonyaMemberIt's actually showing the file in your theme under js/responsive-menu.js on the live site, per Chrome Dev Tools.
I'm asking if you are changing things on your live site, as you are showing me code that is not on the live site per what I am seeing. This is why I questioned where you are making changes.
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 4:36 pm #142093slybugMemberIn any case I added it this way:
.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon,
#responsive-menu-icon {
display: block;
}I also tried it by just adding the # version by itself and still nothing
February 24, 2015 at 4:39 pm #142095TonyaMemberOK, let's stop and take a deep breath together. We need to get on the same page for me to help you.
Please answer these questions for me:
1) Are you working on your live site's theme?
2) How are you making changes to the theme? Using the built-in editor or working offline and then transferring the file?
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 4:42 pm #142097slybugMemberI am click on appearance then editing style css (like normally)
February 24, 2015 at 4:50 pm #142098TonyaMemberGo to line 1486 (or search for .responsive-menu-icon) in the style.css. You need to change each of the .responsive-menu-icon to #responsive-menu-icon like so:
/* Responsive Menu --------------------------------------------- */ #responsive-menu-icon { cursor: pointer; display: none; margin-bottom: -1px; 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; }
2) Then on line 2126, remove the #responsive-menu-icon from this line so that now this styling looks like this:
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { display: none; }
3) Then in the next group, change .responsive-menu-icon to #responsive-menu-icon so that it looks like this:
.genesis-nav-menu.responsive-menu .menu-item, #responsive-menu-icon { display: block; }
Let me know what happens. Make sure you uptick CHILD_THEME_VERSION so that I get the latest revisions.
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 4:57 pm #142099slybugMemberAll most there the only issue is that the menu is expanded on load
February 24, 2015 at 5:29 pm #142102TonyaMemberAround line 2121 in the style.css add the following:
.responsive-menu { display: none; }
I know that the editor doesn't have line numbers, so just search for #responsive-menu-icon. It is in the breakpoint for
@media only screen and (max-width: 768px)
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 5:51 pm #142104slybugMemberThank you thank you thank you thank you..
February 24, 2015 at 5:54 pm #142105TonyaMemberYou are very welcome.
Enjoy your day!
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFebruary 24, 2015 at 5:55 pm #142106TonyaMemberBTW If you don't mind, please mark this one as "Resolved". 🙂
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.