Logo on mobile devices

[deejayhart]

This logo is so tiny as to be unreadable on a mobile. Can you provide a code that either resizxes and centres it, or just removes it and has the site name large please? Otherwise, a homepage just doesn’t work on a mobiel device and therefore cannot be said to be a responsive theme, – fair enough?

Thanks – please try and help here!

[Kyle – SUPPORT]

Hi

Add this to your custom css:

#mobile-logo.has-img {
  max-width: 90%;
}

– Kyle

[deejayhart]

Thanks – it is better, but still not right. What I want is an Alt Logo centred on the home screen INSTEAD of the one on the top. Please? Ta!

[Kyle – SUPPORT]

So you want to have a different logo for mobile? I’m afraid that’s not possible by default sorry. You would need to hire a developer to do this for you if you want that functionality

– Kyle

[deejayhart]

Just look at it, Kyle.

This isn’t responsive design. The logo is unreasable on a mobile. All I want it is to have CSS to hide the logo,
and just have text in the centre of screen – ir need not be an alt logo. Surely this is not too complex – and something rather essential for any future release if you consider the true meaning of ‘responsive’?

Please have a go at this. Thanks.

[Kyle – SUPPORT]

This is in no way down to the theme, responsive means that the website reshapes itself for different screen sizes. It’s not our fault that you have a really long logo that’s hard to read at 320px wide, you could have it bigger but then it would overflow the screen which would be no good.

Please provide me with a login and I’ll see what I can do

– Kyle

[deejayhart]

This reply has been marked as private.

[deejayhart]

Hi Kyle – any joy? Ta!

[Kyle – SUPPORT]

Ok, not sure if this will work but I couldn’t test myself as the ‘editor’ is not in your Appearance section.

You’ll need to use a child theme, and add this code to the functions.php file:

 /* MOBILE HEADER
    ================================================== */
    if ( ! function_exists( 'sf_mobile_header' ) ) {
        function sf_mobile_header() {

            global $woocommerce, $sf_options;

            $mobile_header_layout = $sf_options['mobile_header_layout'];
            $mobile_top_text      = __( $sf_options['mobile_top_text'], 'swiftframework' );
            $mobile_menu_icon     = apply_filters( 'sf_mobile_menu_icon', '<span class="menu-bars"></span>' );
            $mobile_cart_icon     = apply_filters( 'sf_mobile_cart_icon', '<i class="ss-cart"></i>' );
            $mobile_show_cart     = $sf_options['mobile_show_cart'];

            $mobile_header_output = "";

            if ( $mobile_top_text != "" ) {
                $mobile_header_output .= '<div id="mobile-top-text">' . do_shortcode( $mobile_top_text ) . '</div>';
            }

            $mobile_header_output .= '<header id="mobile-header" class="mobile-' . $mobile_header_layout . ' clearfix">' . "\n";

            if ( $mobile_header_layout == "right-logo" ) {
                $mobile_header_output .= '<div class="mobile-header-opts">';
                $mobile_header_output .= '<a href="#" class="mobile-menu-link">' . $mobile_menu_icon . '</a>' . "\n";
                if ( $mobile_show_cart && $woocommerce != "" ) {
                    $mobile_header_output .= '<a href="#" class="mobile-cart-link">' . $mobile_cart_icon . '</a>' . "\n";
                }
                $mobile_header_output .= '</div>';
                $mobile_header_output .= sf_logo( 'logo-right', 'mobile-logo' );
            } else if ( $mobile_header_layout == "center-logo" ) {
                $mobile_header_output .= '<div class="mobile-header-opts opts-left">';
                $mobile_header_output .= '<a href="#" class="mobile-menu-link">' . $mobile_menu_icon . '</a>' . "\n";
                $mobile_header_output .= '</div>';
                $mobile_header_output .= sf_logo( 'logo-center', 'mobile-logo' );
                $mobile_header_output .= '<div class="mobile-header-opts opts-right">';
                if ( $mobile_show_cart && $woocommerce != "" ) {
                    $mobile_header_output .= '<a href="#" class="mobile-cart-link">' . $mobile_cart_icon . '</a>' . "\n";
                }
                $mobile_header_output .= '</div>';
            } else if ( $mobile_header_layout == "center-logo-alt" ) {
                $mobile_header_output .= '<div class="mobile-header-opts opts-left">';
                if ( $mobile_show_cart && $woocommerce != "" ) {
                    $mobile_header_output .= '<a href="#" class="mobile-cart-link">' . $mobile_cart_icon . '</a>' . "\n";
                }
                $mobile_header_output .= '</div>';
                $mobile_header_output .= sf_logo( 'logo-center', 'mobile-logo' );
                $mobile_header_output .= '<div class="mobile-header-opts opts-right">';
                $mobile_header_output .= '<a href="#" class="mobile-menu-link">' . $mobile_menu_icon . '</a>' . "\n";
                $mobile_header_output .= '</div>';
            } else {
                $mobile_header_output .= '<div class="logo-left clearfix" id="mobile-logo">';
                $mobile_header_output .= '<a href="http://www.vanessamakeup.co.uk">';
                $mobile_header_output .= '<div class="text-logo">Makeup by Vanessa</div>';
                $mobile_header_output .= '</a>';
                $mobile_header_output .= '</div>';
                $mobile_header_output .= '<div class="mobile-header-opts">';
                $mobile_header_output .= '<a href="#" class="mobile-menu-link">' . $mobile_menu_icon . '</a>' . "\n";
                if ( $mobile_show_cart && $woocommerce != "" ) {
                    $mobile_header_output .= '<a href="#" class="mobile-cart-link">' . $mobile_cart_icon . '</a>' . "\n";
                }
                $mobile_header_output .= '</div>';
            }
            $mobile_header_output .= '</header>' . "\n";

            echo $mobile_header_output;
        }

        add_action( 'sf_container_start', 'sf_mobile_header', 10 );
    }

– Kyle