Need to change a hamburger mobile menu to a select dropdown menu

jimwise68 · December 28, 2018

Hi All

I have created a wordpress multisite and have had to use two separate themes to make all functionality work and give the impression/consistency of one site.

The only trouble I have is that the sub site theme (Themify Basic) has a burger icon and slide menu when displaying on mobiles responsively. First image below is how it is displaying.

I need to make it look like the second image, which is the way the mobile menu is coded for my main theme (Themex LoveStory)

There are obviously many files that are used to create this and I have no idea where to start to change it.

Again, this is probably something very easy to resolve for someone who knows what they are doing. Unfortunately, it is out of my depth at the moment.

thanks for any help or advice.

Jim

jimwise68 · December 28, 2018

the LoveStory theme header.php code is:

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
   <div class="site-wrap">
       <div class="header-wrap">
           <header class="site-header container">
               <div class="site-logo left">
                   <a href="<?php echo SITE_URL; ?>" rel="home">
                       <img src="<?php echo ThemexCore::getOption('logo', THEME_URI.'images/logo.png'); ?>" alt="<?php bloginfo('name'); ?>" />
                   </a>
               </div>
               
               <div class="header-options">
                   <?php if(is_user_logged_in()) { ?>
                       <a href="<?php echo wp_logout_url(SITE_URL); ?>" class="button secondary"><?php _e('Sign Out', 'lovestory'); ?></a>
                       <a href="<?php echo ThemexUser::$data['user']['profile_url']; ?>" class="button"><?php _e('My Profile', 'lovestory'); ?></a>
                   <?php } else { ?>
                       <a href="#" class="button secondary header-login-button"><?php _e('Sign In', 'lovestory'); ?></a>
                       <?php if(get_option('users_can_register')) { ?>
                       <a href="<?php echo ThemexCore::getURL('register'); ?>" class="button"><?php _e('Register', 'lovestory'); ?></a>
                       <?php } ?>
                   <?php } ?>
               </div>
               
               <nav class="header-menu right">
                   <?php wp_nav_menu( array( 'theme_location' => 'main_menu','container_class' => 'menu' ) ); ?>
                   <div class="mobile-menu hidden">
                       <div class="select-field">
                           <span></span>
                           <?php ThemexInterface::renderSelectMenu('main_menu'); ?>
                       </div>
                   </div>
               </nav>
               
           </header>

The Themify Basic theme header code is:

<?php wp_head(); ?>

</head>

       <?php themify_header_before(); // hook ?>
       <header id="header" class="pagewidth" itemscope="itemscope" itemtype="https://schema.org/WPHeader">
<?php themify_header_start(); // hook ?>
           <hgroup>
               <?php echo themify_logo_image('site_logo'); ?>

               <?php if ( $site_desc = get_bloginfo( 'description' ) ) : ?>
                   <?php global $themify_customizer; ?>
                   <div id="site-description" class="site-description"><?php echo class_exists( 'Themify_Customizer' ) ? $themify_customizer->site_description( $site_desc ) : $site_desc; ?></div>
               <?php endif; ?>
           </hgroup>

<nav itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
               <div id="menu-icon" class="mobile-button"></div>
               <?php
               if ( function_exists( 'themify_custom_menu_nav' ) ) {
                   themify_custom_menu_nav();
               } else {
                   wp_nav_menu( array(
                       'theme_location' => 'main-nav',
                       'fallback_cb' => 'themify_default_main_nav',
                       'container' => '',
                       'menu_id' => 'main-nav',
                       'menu_class' => 'main-nav'
                   ));
               }
               ?>
               
           </nav>

           <?php if(!themify_check('setting-exclude_search_form')): ?>
               <?php get_search_form(); ?>
           <?php endif ?>

<?php if(!themify_check('setting-exclude_rss')): ?>
                   <div class="rss"><a href="<?php if(themify_get('setting-custom_feed_url') != ""){ echo themify_get('setting-custom_feed_url'); } else { echo bloginfo('rss2_url'); } ?>">RSS</a></div>
               <?php endif ?>
           </div>
           
       <?php themify_header_end(); // hook ?>
       </header>

jimwise68 · December 29, 2018

I have resolved this issue now, so can an Admin delete this post please.

thanks

Sign In

Need to change a hamburger mobile menu to a select dropdown menu

Recommended Posts

jimwise68

Link to comment

Share on other sites

jimwise68

Link to comment

Share on other sites

jimwise68

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information