Moving navigation menu

Is it possible to move the navigation menu? At the moment it's at the top of the site, but I'd like it to show just before the content area.

  • Adam Czajczyk
    • Support Gorilla

    Hello angeljs,

    I hope you're well today and thank you for your question!

    Just like Jerry suggested above (thanks Jerry!), the best way would be to change the location of the menu function right inside theme files. How to do this however depends specifically on a theme that you are using.

    It would also be recommended to create a child theme and make changes there instead of editing an original theme directly. Here's a guide on how to create the basic child theme:

    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    Could you please also tell us what theme are you using? If it's a premium theme (not free) could you please grant me a support access to your site so I could check it's files? In order to grant a support access please follow this guide and let me know when it's enabled:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • Jerry Hepperle
    • The Incredible Code Injector

    child theme GREAT IDEA

    after you do that, create a new header.php file.

    here is the code for it. your navigation starts where you see <nav id . . .

    <?php
    /**
    * The Header
    *
    * Displays all of the <head> section and everything up till <main>
    *
    * @package Fluida
    */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <?php cryout_meta_hook(); ?>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" target="_blank" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php
    cryout_header_hook();
    wp_head();
    ?>
    </head>

    <body <?php body_class(); cryout_schema_microdata( 'body' );?>>
    <?php cryout_body_hook(); ?>

    <header id="masthead" class="cryout" <?php cryout_schema_microdata( 'header' ) ?> role="banner">

    <div id="site-header-main">
    <div id="site-header-main-inside">

    </div><!-- #site-header-main-inside -->
    </div><!-- #site-header-main -->

    <div id="header-image-main">
    <div id="header-image-main-inside">
    <?php cryout_headerimage_hook(); ?>
    </div><!-- #header-image-main-inside -->
    </div><!-- #header-image-main -->

    </header><!-- #masthead -->

    <?php cryout_breadcrumbs_hook();?>

    <div id="content" class="cryout">
    <?php cryout_main_hook(); ?>

    <nav id="mobile-menu">
    <span id="nav-cancel"><i class="blicon-cross3"></i></span>
    <?php cryout_mobilemenu_hook(); ?>
    </nav> <!-- #mobile-menu -->

    <div id="branding">
    <?php cryout_branding_hook();?>
    </div><!-- #branding -->

    <?php cryout_header_socials_hook();?>

    <span> </span>
    <nav id="access" role="navigation" aria-label="Primary Menu" <?php cryout_schema_microdata( 'menu' ); ?>>
    <?php cryout_access_hook();?>
    </nav><!-- #access -->

  • Predrag Dubajic
    • Support

    Hi angeljs,

    It looks like that the menu requires to be inside holder with site-header-main ID as this is what's defined in code to be used for triggering dropdown.

    I've attached modified header.php file below so give that a try, it should work fine but there are some styling adjustments needed after this change.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi angeljs,

    Ah, true, that's because header classes are used for hiding and showing menus on different screen sizes, can you try using new header.php that I attached, I added new class there that we can use, and then add this CSS code in your child theme style.css:

    @media (max-width: 800px) {
        .custom-cryout #nav-toggle {
            display: block;
        }
    }
    
    @media (max-width: 800px) {
        .custom-cryout #access {
            display: none;
        }
    }

    Let us know how it goes.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.