- This topic has 17 replies, 3 voices, and was last updated 7 years, 8 months ago by Tom.
-
AuthorPosts
-
January 17, 2016 at 6:43 pm #166287SCIP
Currently the mobile menu is below the header logo until it becomes sticky.
Is it possible to move the mobile menu above the logo, even when not sticky.
This site has a large logo so it’s not possible to put it in the menu bar.
Thanks
January 18, 2016 at 12:54 am #166311TomLead DeveloperLead DeveloperHmm, this is a tough one unless you have your navigation set to be above the header.
Where is it currently set to?
January 18, 2016 at 1:03 am #166320SCIPIt’s set to blow the header. I had a play last night and couldn’t see what to do.
The demo site is bnt.scipdev.org.
It’s only icing on the cake.
January 18, 2016 at 1:11 am #166323TomLead DeveloperLead DeveloperNice site!
You could technically use some javascript for this.
Paste this block of code into the wp_footer hook “Appearance > GP Hooks”:
<script> jQuery(document).ready(function($) { var mobile, widthTimer; mobile = jQuery( '.menu-toggle' ); function generateMoveNav() { if ( mobile.is( ':visible' ) ) { jQuery('.main-navigation').insertBefore('.site-header'); } else { jQuery('.main-navigation').insertAfter('.site-header'); } } if ( mobile.is( ':visible' ) ) { generateMoveNav(); } jQuery(window).resize(function() { clearTimeout(widthTimer); widthTimer = setTimeout(generateMoveNav, 100); }); }); </script>
- This reply was modified 8 years, 2 months ago by Tom.
January 18, 2016 at 4:07 am #166341SCIPThanks
The code works perfectly but does cause a jump when the page is loading because the menu does load below the logo I suppose and is move by javascript as you scroll.
I think I will leave it out.
However, the code is there for other people to use.
Thank you for your help
Mark
January 18, 2016 at 11:00 am #166414TomLead DeveloperLead DeveloperI just made a small adjustment that might make that jump a little less noticeable.
I’ll keep this topic in mind to see if I can come up with something better π
January 20, 2016 at 4:55 am #166904SCIPThank you Tom, that worked perfectly.
Your support is much appreciated.
Mark.
January 20, 2016 at 11:11 am #167004TomLead DeveloperLead DeveloperYou’re welcome! π
July 3, 2016 at 2:44 am #206155AnnamalaiHi Tom any update on this topic please let me know, I also need to do the same like Menu should go top above the logo
July 3, 2016 at 9:01 am #206204TomLead DeveloperLead DeveloperNo updates yet I’m afraid – although there is the mobile header feature in Menu Plus where you can add your logo into the navigation bar.
July 4, 2016 at 2:50 am #206383AnnamalaiMy Goal is need to move the Primary menu above the logo on the page load itself during mobile view i.e
for Responsive. When i debugged found that move-navigation.min js creating plugin. I
have done the following thingshttp://1cb.424.myftpupload.com/
1. Using Snippets plugin Deregister the move-navigation.js:
` add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
function my_deregister_javascript() {
wp_deregister_script( ‘move-navigation’ );
}`2. Next I added the script in wp_footer of GP_Hooks
jQuery(document).ready(function($) { generateMoveNav(); // Call on page Load jQuery(window).resize(function() { if(jQuery(window).width() < 751){ // During Resize generateMoveNav(); } }); function generateMoveNav() { var mobile = jQuery( '.menu-toggle' ); if ( mobile.is( ':visible' )) { jQuery('.main-navigation').insertBefore('.site-header'); } else { } } });
But still move-navigation.js not getting removed
July 4, 2016 at 9:48 am #206460TomLead DeveloperLead DeveloperTo remove that script, you need to do this:
add_action( 'wp_enqueue_scripts', 'generate_remove_scripts' ); function generate_remove_scripts() { wp_dequeue_script( 'generate-move-navigation' ); }
July 4, 2016 at 6:59 pm #206565AnnamalaiThanks Tom for your help
July 5, 2016 at 12:02 am #206602TomLead DeveloperLead DeveloperNo problem π
July 8, 2016 at 2:17 am #207484AnnamalaiHi Tom,
Sorry to disturb you again, I added a secondary menu in my website in the Footer section During mobile view or if width is less then 750 px(Responsive) I need to expand show the menu link no need the toggle option. For that I added the following code in GPhooks footer section
jQuery( ".secondary-menu-toggle" ).trigger( "click" ).css('display','none'); Menu is expanding as per click but <strong> X
mark its not getting removed.. Some times the above code is removing the whole secondary menu links
Is there any way to remove the Toggle option and display all the secondary menus by default
-
AuthorPosts
- You must be logged in to reply to this topic.