WordPress Theme Customizations ($1+$25 on delivery)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi! I'm looking for some CSS/PHP help with a WordPress theme. I'm using a child theme of Storefront and the Responsive Menu plugin with the default menu hidden (I am using the Responsive Plugin Menu exclusively).

I would like a solution that does the following and that I can add to my WP Customizer's Custom CSS and/or my child theme's functions.php (or as an additional .php file):

  • By default, WordPress won't let you have both the site's logo (image) and description on at the same time. I'd like to have the logo, centered, above the description (also centered)
  • The plugin's menu button, .responsive-menu-button, should be above the site's logo and description on mobile only

I have posted this for $1 but will award a $25 tip to an acceptable solution. Please let me know if I can provide more info that will help you to provide a solution. Thank you.

Do you have an online link? Which child theme are you using?
kostasx 3 months ago
Hi, I don't, but I am using this (so basically Storefront without much (if any) customization: https://github.com/stuartduff/storefront-child-theme
sharper 3 months ago
awarded to Zhopon

Crowdsource coding tasks.

1 Solution


Add this in child theme's functions.php

if ( ! function_exists( 'storefront_site_title_or_logo' ) ) {

function storefront_site_title_or_logo( $echo = true ) {
    if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
        $logo = get_custom_logo();
        $html = is_home() ? '<h1 class="logo">' . $logo . '</h1>' : $logo;
        $html .= '<p class="site-description">' . esc_html( get_bloginfo( 'description', 'display' ) ) . '</p>';

    } else {
        $tag = is_home() ? 'h1' : 'div';

        $html = '<' . esc_attr( $tag ) . ' class="beta site-title"><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">' . esc_html( get_bloginfo( 'name' ) ) . '</a></' . esc_attr( $tag ) . '>';

        if ( '' !== get_bloginfo( 'description' ) ) {
            $html .= '<p class="site-description">' . esc_html( get_bloginfo( 'description', 'display' ) ) . '</p>';
        }
    }

    if ( ! $echo ) {
        return $html;
    }

    echo $html;
}
}

Add this in your WP Customizer's Custom CSS

.site-branding img{
margin:auto;
 }
 p.site-description{
  text-align: center;
 }
 @media screen and (max-width: 600px) {
  button#responsive-menu-button {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
   }
 .site-branding .site-description{
    display: block;
  }
 .site-branding, .woocommerce-active .site-branding{
    float:none !important;
    margin-top: 60px; /*add it only if your logo overlaps with menu button*/

 }
}

Sorry for the for bad code formatting.
Here is the complete solution, please let me know if you face any issue.