Menu icon Foundation
FoundationPress - Dynamic Height Menu?

I installed wordpress with the foundationpress theme and added the option to add a custom image/logo through customizer. the problem i have is that the logo is going ot be larger than the navbars height which is by default set to height: 2.8125rem; (.top-bar)

Is there a way or a better option to scale the navbar with the size of the logo that is uploaded and without it breaking any responsive options?

Thanks

// top-bar.php file - code is below

<div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
                <div class='site-logo'>
                    <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
                </div>
            <?php else : ?>
                <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
            <?php endif; ?>
            </li>
        </ul>
        <section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
        </section>
    </nav>
</div>
            
            
// functions.php code to add the logo

function customizer_logo( $wp_customize ) {
    $wp_customize->add_section( 'themeslug_logo_section' , array(
    'title'       => __( 'Custom Logo', 'themeslug' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
    ) );

	$wp_customize->add_setting( 'themeslug_logo' );

	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
    'label'    => __( 'Custom Logo', 'themeslug' ),
    'section'  => 'themeslug_logo_section',
    'settings' => 'themeslug_logo',
) ) );
}
add_action( 'customize_register', 'customizer_logo' );


// style.css

Have not added any styles successfuly that helped, using vanilla css for this.

         

foundationPresscsswordpressFoundationnavigationResponsive

I installed wordpress with the foundationpress theme and added the option to add a custom image/logo through customizer. the problem i have is that the logo is going ot be larger than the navbars height which is by default set to height: 2.8125rem; (.top-bar)

Is there a way or a better option to scale the navbar with the size of the logo that is uploaded and without it breaking any responsive options?

Thanks

// top-bar.php file - code is below

<div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
                <div class='site-logo'>
                    <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
                </div>
            <?php else : ?>
                <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
            <?php endif; ?>
            </li>
        </ul>
        <section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
        </section>
    </nav>
</div>
            
            
// functions.php code to add the logo

function customizer_logo( $wp_customize ) {
    $wp_customize->add_section( 'themeslug_logo_section' , array(
    'title'       => __( 'Custom Logo', 'themeslug' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
    ) );

	$wp_customize->add_setting( 'themeslug_logo' );

	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
    'label'    => __( 'Custom Logo', 'themeslug' ),
    'section'  => 'themeslug_logo_section',
    'settings' => 'themeslug_logo',
) ) );
}
add_action( 'customize_register', 'customizer_logo' );


// style.css

Have not added any styles successfuly that helped, using vanilla css for this.

         
Rafi Benkual about 4 years ago

You're logo does not have to be contained by the top-bar. You can have it be larger or have it be separate.

http://codepen.io/rafibomb/pen/jPgLQB