CODEWITHSUNDEEP
phpwordpressmenuwordpress-theming
Michelle
Michelle

Reputation: 549

Wordpress Menus won't appear correctly

I want to have a split menu with logo in the middle for my header. I have created two menus, using the menu tool in Wordpress, but when I choose 'Top Menu (left) to allocate this menu to the left side, the menu doesn't appear at all. Same with the second menu and the 'Top Menu (Right)' option. They just dont show up. If I choose 'Primary Menu' then it does show up, but on the right hand size of the logo.

My header.php code is this - 

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php lsx_head_top(); ?>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php lsx_head_bottom(); ?>
    <?php wp_head(); ?>
    <style>
        .home-middle-block{
            border-left: 1px solid!important;
            border-right: 1px solid!important;
        } 
        .home-middle-block:before, .home-middle-block:after{
            border-bottom: 1px solid!important;
        }
    </style>
</head>

<body <?php body_class( 'lsx' ); ?>>
    <?php lsx_body_top(); ?>

    <div class="header-wrap">
        <?php //lsx_header_before(); ?>

        <header id="masthead" class="<?php lsx_header_classes(); ?>" role="banner">
            <?php lsx_header_top(); ?>

            <div class="row custom-header desktop-only">
                <div class="col-lg-5 right-menu" style="border-bottom: 1px solid;">
                    <?php //lsx_nav_menu_two(); ?>
                </div>
                <div class="col-lg-2 navbar-logo">
                    <?php lsx_nav_before(); ?>
                </div>
                <div class="col-lg-5 left-menu" style="border-bottom: 1px solid; overflow: hidden;">
                    <?php lsx_nav_menu(); ?>
                </div>
                <?php lsx_nav_after(); ?>
                <?php lsx_header_bottom(); ?>
            </div>

            <div class="row custom-header mobile-tab-only">
                <?php lsx_nav_before(); ?>
                <?php 
                if(has_nav_menu('mobile-menu')):
                    ?>
                    <nav class="primary-navbar collapse navbar-collapse">
                        <?php 
                        wp_nav_menu( array(
                            'theme_location'    => 'mobile-menu',
                            'depth'             => 3,
                            'container'         => false,
                            'menu_class'        => 'nav navbar-nav',
                            'walker'            => new LSX_Bootstrap_Navwalker(),
                        ) );
                        ?>
                    </nav>
                    <?php
                endif;
                ?>
                <?php lsx_nav_after(); ?>
                <?php lsx_header_bottom(); ?>
            </div>
        </header>

        <?php lsx_header_after(); ?>
    </div>

    <div class="wrap container" role="document" tabindex="-1">
        <div class="content role row">

Could someone please help figure out why these menus won't show up in the correct place? My mobile menu won't show up on a mobile device either.

Thanks!

Upvotes: 0

Views: 186

Answers (1)

Sid Biffi
Sid Biffi

Reputation: 522

It depends on how your theme handles the menu location, you should see your template documentation or insert custom code in order to customize the theme as you want.

To do that add this code in 

function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'New Menu' ),
      'another-menu' => __( 'Another Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

And this code wherever you want to display your custom menu

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

If you want to know more just google it out, the source of the example code

Upvotes: 1

Related Questions