Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #119425
    infonet
    Participant

    Hello,

    I currently have the following disposal :
    logo (= header image) then main menu then secondary menu, empiled

    Is there a way to have main menu then logo then secondary menu ?

    Either by inserting a menu in the header ?
    Either by inserting an image between main menu and secondary menu ?

    Thanks in advance for your help.
    Best Regards
    Marc

    #119426
    tikaram
    Participant

    @infonet : Please post in your site URL.

    Regards,
    Tikaram

    #119427
    Mahesh
    Participant

    @infonet: For this, you’ll need to create child theme. You can find more about creating child theme HERE. Then in your child theme’s functions.php, add the following code.

    function catchbox_main_header_image_position() {
    	// Getting data from Theme Options
    	$options  = catchbox_get_options();
    	$position = $options['header_image_position'];
    
    	if ( 'above' == $position ) {
    		add_action( 'catchbox_child_after_primary_menu', 'catchbox_main_header_image', 10 );
    	}
    	elseif ( 'below' == $position ) {
    		add_action( 'catchbox_after_headercontent', 'catchbox_main_header_image', 10 );
    	}
    }
    
    function catchbox_header_menu() {
        //Getting Ready to load options data
        $options = catchbox_get_options();
        $classes = "mobile-menu-anchor page-menu";
    
        // Header Left Mobile Menu Anchor
        if ( has_nav_menu( 'primary' ) ) {
            $classes = "mobile-menu-anchor primary-menu";
        }
        ?>
        <div class="menu-access-wrap mobile-header-menu clearfix">
            <?php if ( empty ($options['disable_responsive'] ) ) { ?>
                <div id="mobile-header-left-menu" class="<?php echo $classes; ?>">
                    <?php
                    $hide_mobile_menu_labels = isset( $options['hide_mobile_menu_labels'] ) ? $options['hide_mobile_menu_labels'] : 0;
    
                    $label = isset( $options['primary_mobile_menu_label'] ) ? $options['primary_mobile_menu_label'] : esc_html__( 'Menu', 'catch-box-pro' );
    
                    $labelclass = "mobile-menu-text";
    
                    if ( !empty ( $hide_mobile_menu_labels ) ) {
                        $labelclass = "screen-reader-text";
                    }
                    ?>
                    <a href="#mobile-header-left-nav" id="menu-toggle-primary" class="genericon genericon-menu">
                        <span class="<?php echo esc_attr( $labelclass ); ?>"><?php echo esc_attr( $label ); ?></span>
                    </a>
                </div><!-- #mobile-header-left-menu -->
    
                <?php
                if ( !empty ($options['enable_sec_menu'] ) && has_nav_menu( 'secondary', 'catch-box-pro' ) ) :
                        $menuclass = "mobile-enable"; ?>
                        <div id="mobile-header-right-menu" class="mobile-menu-anchor secondary-menu">
                            <?php
                            $hide_mobile_menu_labels = isset( $options['hide_mobile_menu_labels'] ) ? $options['hide_mobile_menu_labels'] : 0;
                            $label = isset( $options['secondary_mobile_menu_label'] ) ? $options['secondary_mobile_menu_label'] : esc_html__( 'Secondary Menu', 'catch-box-pro' );
                            $labelclass = "mobile-menu-text";
                            if ( !empty ( $hide_mobile_menu_labels ) ) {
                                $labelclass = "screen-reader-text";
                            }
                            ?>
                            <a href="#mobile-header-right-nav" id="menu-toggle-secondary" class="genericon genericon-menu">
                                <span class="<?php echo $labelclass; ?>"><?php echo esc_attr( $label ); ?></span>
                            </a>
                        </div><!-- #mobile-header-right-menu -->
                    <?php else :
                        $menuclass = "mobile-disable";
                    endif; ?>
            <?php } ?>
    
            <div id="site-header-menu-primary" class="site-header-menu">
                <nav id="access" class="main-navigation menu-focus" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'catch-box-pro' ); ?>">
                    <h3 class="screen-reader-text"><?php _e( 'Primary menu', 'catch-box-pro' ); ?></h3>
                    <?php
                        if ( has_nav_menu( 'primary', 'catch-box-pro' ) ) {
                            $args = array(
                                'theme_location'    => 'primary',
                                'container_class'   => 'menu-header-container',
                                'items_wrap'        => '<ul class="menu">%3$s</ul>'
                            );
                            wp_nav_menu( $args );
                        }
                        else {
                            echo '<div class="menu-header-container">';
                                wp_page_menu( array( 'menu_class'  => 'menu' ) );
                            echo '</div>';
                        }
                    ?>
                </nav><!-- #access -->
            </div><!-- .site-header-menu -->
    
            <?php do_action( 'catchbox_child_after_primary_menu' ); ?>
    
            <?php if ( has_nav_menu( 'secondary' ) ) { ?>
                <div id="site-header-menu-secondary" class="site-header-menu">
                    <nav id="access-secondary" class="<?php echo $menuclass; ?>"  role="navigation" aria-label="<?php esc_attr_e( 'Secondary Menu', 'catch-box-pro' ); ?>">
                        <h3 class="screen-reader-text"><?php _e( 'Secondary menu', 'catch-box-pro' ); ?></h3>
                        <?php wp_nav_menu( array( 'theme_location'  => 'secondary', 'container_class' => 'menu-secondary-container' ) );  ?>
                    </nav><!-- #access-secondary -->
                </div><!-- .site-header-menu -->
            <?php } ?>
        </div><!-- .menu-access-wrap -->
    <?php
    }
    
    function catchbox_child_remove_header_action(){
    	remove_action( 'catchbox_before_headercontent', 'catchbox_main_header_image', 10 );
    }
    
    add_action( 'init', 'catchbox_child_remove_header_action' );

    Note: Please make sure “Above Header Content” is selected in Header Image Location

    Regards,
    Mahesh

    #119438
    infonet
    Participant

    Thanks Mahesh, it works perfectly 🙂

    #119517
    Mahesh
    Participant

    @infonet: I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
    https://wordpress.org/support/theme/catch-box/reviews/#new-post
    Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated.
    Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know.

    Regards,
    Mahesh

    #120152
    Derek Batty
    Participant

    Hi Mahesh or anyone else

    I was wanting to do what has been done with this above post.

    That is move my primary menu above the site logo or header area and then have my secondary menu appear below site logo or header area.

    As you can see they currently sit on top of each other and want to separate them, one above logo and secondary below, where it currently appears although we have called it a Navigation Menu.

    Appreciate your help

    https://theancientpathways.com

    Regards

    Derek

    #120153
    tikaram
    Participant

    @dbatty : This option is not available from theme options. You will need to download the child theme from this link. Open the functions.php file which is inside the child theme folder and add the following lines of code and save the file.

    function catchresponsive_child_primary_nav_above_logo_header_image() {
      remove_action( 'catchresponsive_after_header', 'catchresponsive_primary_menu', 20 );
      add_action( 'catchresponsive_header', 'catchresponsive_primary_menu', 25 );
    }
    add_action( 'init', 'catchresponsive_child_primary_nav_above_logo_header_image' );

    Login to your WordPress Dashboard and upload the child theme and activate the child theme. The primary menu should move above the logo or header part. Let me know if you need further assistance.

    Regards,
    Tikaram

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Menu in the header ? inserting an image between main menu and secondary menu ?’ is closed to new replies.