[wanderlust-effect]

Hi there,

how do I move the website title on top of the primary menu bar at the top of the page? and any chance I can change the font of the title?

Cheers
Erica

[Pratik]

Hi @wanderlust-effect,
For this, you need to do a bit of customization via child theme. First, you need to add the child theme for Clean Box. The details for child theme is here.

Then, in the child theme’s functions.php file, add following code:

/**
 * Override Parent theme primary menu function to show the Primary Menu With site branding
 *
 */
function clean_box_primary_menu() {
    $options  = clean_box_get_theme_options();
	?>
    <div id="fixed-header-top">
        <?php clean_box_site_branding(); ?>
        <div class="wrapper">
            <div id="mobile-primary-menu" class="mobile-menu-anchor fixed-primary-menu">
                <a href="#mobile-primary-nav" id="primary-menu-anchor" class="genericon genericon-menu">
                    <span class="mobile-menu-text screen-reader-text">
                        <?php esc_html_e( 'Menu', 'clean-box' ); ?>
                    </span>
                </a>
            </div><!-- #mobile-primary-menu -->

            <?php
                $logo_alt = ( '' != $options['logo_alt_text'] ) ? $options['logo_alt_text'] : get_bloginfo( 'name', 'display' );

                if ( isset( $options[ 'logo_icon' ] ) &&  $options[ 'logo_icon' ] != '' &&  !empty( $options[ 'logo_icon' ] ) ){
                     echo '<div id="logo-icon"><a href="' . esc_url( home_url( '/' ) ) . '" title="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '" rel="home">
                        <img src="' . esc_url( $options['logo_icon'] ) . '" alt="' . esc_attr( $logo_alt ). '">
                    </a></div>';
                }
            ?>

           <nav class="nav-primary search-enabled" role="navigation">
                <h1 class="assistive-text"><?php _e( 'Primary Menu', 'clean-box' ); ?></h1>
                <div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'clean-box' ); ?>"><?php _e( 'Skip to content', 'clean-box' ); ?></a></div>
                <?php
                    if ( has_nav_menu( 'primary' ) ) {
                        $clean_box_primary_menu_args = array(
                            'theme_location'    => 'primary',
                            'menu_class'        => 'menu clean-box-nav-menu',
                            'container'         => false
                        );
                        wp_nav_menu( $clean_box_primary_menu_args );
                    }
                    else {
                        wp_page_menu( array( 'menu_class'  => 'page-menu-wrap' ) );
                    }

                    ?>
            </nav><!-- .nav-primary -->

            <div id="header-toggle">
                <a href="#header-toggle-sidebar" class="genericon"><span class="header-toggle-text screen-reader-text"><?php _e( 'Show Header Sidebar Content', 'clean-box' ); ?></span></a>
            </div>

            <div id="header-toggle-sidebar" class="widget-area displaynone" role="complementary">
                <?php if ( is_active_sidebar( 'header-toggle' ) ) { ?>
                    <?php dynamic_sidebar( 'header-toggle' ); ?>
                <?php
                }
                else { ?>
                    <section class="widget widget_search" id="header-serach">
                        <?php get_search_form(); ?>
                    </section>

                    <?php

                    if ( '' != ( $clean_box_social_icons = clean_box_get_social_icons() ) ) { ?>
                        <section class="widget widget_clean_box_social_icons" id="header-social-icons">
                            <div class="widget-wrap">
                                <?php echo $clean_box_social_icons; ?>
                            </div>
                        </section>
                    <?php
                    }
                }
                ?>
            </div><!-- #header-toggle-sidebar -->
        </div><!-- .wrapper -->
    </div><!-- #fixed-header-top -->
    <?php
}

/*
 * Remove Site branding from its current hook on Parent theme
 */
function clean_box_remove_site_branding_hook() {
	remove_action( 'clean_box_header', 'clean_box_site_branding', 70 );
}
add_action( 'init', 'clean_box_remove_site_branding_hook' );

There are two function. First one overrides the Parent theme function to show site title and tagline above primary menu.

The second function removes the current site title.

For changing the font of site title, you can add following CSS in Appearance=> Customize=> Theme Options => Custom CSS box:

.site-title {
    font-family: "Times New Roman", Georgia, Serif;
}

You can change font-family to your desired font. To know more about font family, you can visit this link.

Let me know if this solves your problem or not.

Regards,
Pratik

[Author]

Posts