[coorsleftfield]

Our old site is here, as you can see the logo is on the menu bar:

http://www.spondeopreschool.com/

I’m trying to make a new web site at http://www.spondeopreschool.com/newsite using the Catch responsive theme, and would like to copy the look and feel. Would like the logo to be sitting on the menu bar on the left site, similar to the current site.

Is this possible with custom css?

[Mahesh]

Hi @coorsleftfield,

For the above change, you’ll need to create a child theme. You can find more details on creating a child theme HERE. Then in your child theme’s functions.php add the following codes.

function catchresponsive_primary_menu() {
    ?>
	<nav class="nav-primary search-enabled" role="navigation">
        <div class="wrapper">
        	<?php
	        	/* Site Branding Start*/
	        	$options 			= catchresponsive_get_theme_options();
	        	//Checking Logo
				if ( '' != $options['logo'] && !$options['logo_disable'] ) {
					$catchresponsive_site_logo = '
					<div id="nav-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><!-- #nav-site-logo -->';
				}
				else {
					$catchresponsive_site_logo = '';
				}

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

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

				}
				else {
					$catchresponsive_site_branding	= '<div id="nav-site-branding">';
					$catchresponsive_site_branding	.= $catchresponsive_header_text;

				}

				$catchresponsive_site_branding 	.= '</div><!-- #nav-site-branding-->';

				echo $catchresponsive_site_branding ;

			/* Site Branding End*/

        	?>
            <h1 class="assistive-text"><?php _e( 'Primary Menu', 'catch-responsive' ); ?></h1>
            <div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'catch-responsive' ); ?>"><?php _e( 'Skip to content', 'catch-responsive' ); ?></a></div>
            <?php
                if ( has_nav_menu( 'primary' ) ) {
                    $catchresponsive_primary_menu_args = array(
                        'theme_location'    => 'primary',
                        'menu_class'        => 'menu catchresponsive-nav-menu',
                        'container'         => false
                    );
                    wp_nav_menu( $catchresponsive_primary_menu_args );
                }
                else {
                    wp_page_menu( array( 'menu_class'  => 'menu catchresponsive-nav-menu' ) );
                }

                ?>
                <div id="search-toggle" class="genericon">
                    <a class="screen-reader-text" href="#search-container"><?php _e( 'Search', 'catch-responsive' ); ?></a>
                </div>

                <div id="search-container" class="displaynone">
                    <?php get_Search_form(); ?>
                </div>
    	</div><!-- .wrapper -->
    </nav><!-- .nav-primary -->
    <?php
}

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

#nav-site-branding {
    left: 15px;
    position: absolute;
    top: -65px;
}

.menu.catchresponsive-nav-menu {
    margin-left: 300px;
}

#site-branding {
    display: none;
}
@media screen and ( min-width: 991px ) and ( max-width: 1100px ) {
    #nav-site-branding img {
        max-width: 90%
    }

    .menu.catchresponsive-nav-menu {
        margin-left: 250px;
    }
}

@media screen and ( max-width: 990px ) {
    #site-branding {
        display: block;
    }
    #nav-site-branding {
        display: none;
    }
}

Regards,
Mahesh

[arif2050bd]

Hi Mahesh,

I read your above fix and checked the result on the site. It is fantastic.
I’m seeking a solution of the same issue but with a different theme (its SHOPSTAR).
Now my question is will ur fix work for the theme I mentioned (or any other theme)? (of course there should be some changes in your above script)
Better if you can give me the full script or otherwise “the hints” for modifying above scripts.

BR
Arif

[Mahesh]

@arif2050bd: I don’t think above code will work for the theme you’ve mentioned or any other themes beside Catch Responsive Free and Pro. Well, I could help you if the theme was of Catch Themes team. This forum is only to provide support for Catch Themes’s themes and plugins. Please contact the SHOPSTAR development team for support.

Regards,
Mahesh

[sandy07]

Hi
I would also like the logo on the navigation position. I have changed the funktions.php and de style.css in my child themes. But now, de logo will not be displayed.
Can you help me please?
Here my site: www2.a-p-d.ch/dienstleistungen
Thank you and sorry for my bad english 😉
Sandy

[Mahesh]

@sandy07: I checked your site and the logo is displaying fine. On the left of the navigation. Please check the image in the link below:
http://bit.ly/2klR9g5

Regards,
Mahesh

[sandy07]

I had to change your css code from

#site-branding {
    display: none;
}

to

#site-branding {
    display: block;
}

Thanks!
Regards,
Sandy

[Author]

Posts