[rybak66zuo]

Hey, is there any way to put the social icons from “wrapper” in search bar to the header? Just like this is in “Gridalicious Theme”?

Thanks in advance.

[Mahesh]

Hi @rybak66zuo,

You’ll need to do some customization for it. First of all, you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in child theme’s functions.php add the following codes.

//
// Move Social icons from search to header as in gridalicious
//
function clean_box_primary_menu() {
    $options  = clean_box_get_theme_options();
	?>
    <div id="fixed-header-top">
        <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
                }
                ?>
            </div><!-- #header-toggle-sidebar -->
        </div><!-- .wrapper -->
    </div><!-- #fixed-header-top -->
    <?php
}

function clean_box_site_branding() {
		$options 			= clean_box_get_theme_options();

		//Checking Logo
		if ( '' != $options['logo'] && !$options['logo_disable'] ) {
			$clean_box_site_logo = '
			<div id="site-logo">
				<a href="' . esc_url( home_url( '/' ) ) . '" title="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '" rel="home">
					<img src="' . esc_url( $options['logo'] ) . '" alt="' . esc_attr(  $options['logo_alt_text'] ). '">
				</a>
			</div><!-- #site-logo -->';
		}
		else {
			$clean_box_site_logo = '';
		}

		$clean_box_header_text = '
		<div id="site-header">
			<h1 class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '">' . esc_html( get_bloginfo( 'name' ) ) . '</a></h1>
			<h2 class="site-description">' . esc_html( get_bloginfo( 'description' ) ) . '</h2>
		</div><!-- #site-header -->';

		$social_div = '';

		if ( '' != ( $clean_box_social_icons = clean_box_get_social_icons() ) ) {
            $social_div = '<section class="widget widget_clean_box_social_icons" id="header-social-icons">
                <div class="widget-wrap">'.
                    $clean_box_social_icons .'
                </div>
            </section>';

        }

		$text_color = get_header_textcolor();
		if ( '' != $options['logo'] && !$options['logo_disable'] ) {
			if ( ! $options['move_title_tagline'] && 'blank' != $text_color ) {
				$clean_box_site_branding  = '<div id="site-branding" class="logo-left">';
				$clean_box_site_branding .= $clean_box_site_logo;
				$clean_box_site_branding .= $clean_box_header_text;
			}
			else {
				$clean_box_site_branding  = '<div id="site-branding" class="logo-right">';
				$clean_box_site_branding .= $clean_box_header_text;
				$clean_box_site_branding .= $clean_box_site_logo;
			}

		}
		else {
			$clean_box_site_branding	= '<div id="site-branding">';
			$clean_box_site_branding	.= $clean_box_header_text;
		}

		$clean_box_site_branding 	.= '</div><!-- #site-branding-->';
		$clean_box_site_branding 	.= $social_div;

		echo $clean_box_site_branding ;
	}

Then go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

#site-branding {
		float: left;
		display: inline-block;
		width: auto;
		text-align: left;
	}
	#header-social-icons {
		float: right;
		display: inline-block;
	}
@media screen and (max-width: 480px){
	#site-branding, #header-social-icons {
			float: none;
			width: 100%;
			text-align: center;
		}
	}

.site .widget_clean_box_social_icons .genericon {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-sizing: content-box;
    color: #404040;
    margin: 0 0 5px 5px;
    padding: 6px;
}

.site .widget_clean_box_social_icons .genericon:hover {
    border: none;
}

Regards,
Mahesh

[rybak66zuo]

Mahesh, thank you so much 🙂

[Author]

Posts