Sridhar Katakam

Genesis and WordPress Tutorials

Displaying Full Navigation on Desktops in Remobile Pro

by 4 Comments

In the members-only forum in Tutorial Requests topic, Bodie asks:

Could you help me change the Remobile pro navigation? I would like to:

1) move it under the header instead of above it.
2) Have it centered below the site title and tagline and be visible by default (no hamburger menu)
3) Implement the Beautiful Pro mobile responsive menu code on smaller screens.

In this tutorial I share the steps to customize Remobile Pro such that the hamburger menu does not appear until 800px and making it appear below the Header.

Desktop widths:

remobile-pro-menu-customization

Mobile widths:

remobile-pro-menu-customization-mobile-view

With 'Sample Pages' menu item tapped:

remobile-pro-menu-customization-mobile-view-expanded

Step 1

In functions.php replace

wp_enqueue_script( 'remobile-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
view raw gistfile1.php hosted with ❤ by GitHub

with

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Sridhar,

    Thanks very much for this. Worked great. One question – how would I now exclude the navigation from the home/front page only?

    -Kent

    Reply

  • Hello Sridhar,

    I’ve made the adjustments but I am struggling to get the results. The menu has moved below the header but it still has the icon.

    Here is the site: https://loadingdose.uk

    Can you help?

    Reply
    • >