• Resolved BalazsTU

    (@balazstu)


    Hi Tomas,

    Happy new year to you. Could you give me a bit of advice, please?
    I’ve added this code to get rid of the header logo when browsing my site on mobile and show the title instead but the title doesn’t show up. Is there a javascript that switches between the two?
    @media screen and (max-width: 800px) {
    .header-logo {
    display: none;
    }
    .site-title {
    display: block!important;
    }
    }

    The other idea would be to display both the logo and the title and and then get rid of the logo on mobile so that only the title would remain. How can I display both?
    Thank you.

Viewing 15 replies - 1 through 15 (of 23 total)
  • Theme Author TT Themes

    (@tomastoman)

    Dear Balazs,

    there is a PHP condition in “header.php” which controls displaying of the Site Title or Logo (if there is set a Logo in “Theme Options > Header Settings”, only the Logo is displayed, if there is no Logo, the Site Title is outputted instead):

    <?php if ( $songwriter_options_db['songwriter_logo_url'] == '' ) { ?>
          <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
    <?php } else { ?>
          <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
    <?php } ?>

    To display both Logo and Site Title, just remove the condition:

    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>

    If you delete the condition, the custom CSS you have posted above should work, too.

    Best regards,
    Tomas Toman

    Thread Starter BalazsTU

    (@balazstu)

    If I understand it correctly I should delete these two lines:
    <?php if ( $songwriter_options_db[‘songwriter_logo_url’] == ” ) { ?>
    <?php } else { ?>
    Is that right? That’s what I tried and the whole site turned blank white, not showing anything.

    Theme Author TT Themes

    (@tomastoman)

    You should delete these two lines plus the <?php } ?> code just at the end of the condition. This is the original code:

    <?php if ( $songwriter_options_db['songwriter_logo_url'] == '' ) { ?>
          <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
    <?php } else { ?>
          <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
    <?php } ?>

    To display both Logo and Site Title, just replace the whole code posted above with this one:

    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>

    Best regards,
    Tomas Toman

    Thread Starter BalazsTU

    (@balazstu)

    Ah, that worked. Thanks. I think I kind of did the same before but it didn’t work for some reason. Maybe because I left some empty lines.
    Now the title appears above the logo. Is there any way of showing it on top of the logo, just like the searchbox? So the logo would act like a background image behind the title. https://balazstudlik.com/

    Theme Author TT Themes

    (@tomastoman)

    The best way how to show the Site Title on the Logo is to set absolute position for the Site Title:

    @media screen and (min-width: 800px) {
    #wrapper .site-title {position: absolute; top: 0px; left: 0px;}
    }

    Best regards,
    Tomas Toman

    Thread Starter BalazsTU

    (@balazstu)

    Unfortunately this doesn’t do anything.
    I managed to move the title to where I wanted by adding the title to this:

    @media screen and (max-width: 1170px) {
    #wrapper .entry-content,
    #wrapper .entry-headline-wrapper,
    #wrapper .post-entry,
    #wrapper .entry-headline-wrapper {
    width: 100% !important;
    }
    }
    #wrapper .site-title {position: absolute; top: 0px; left: 0px;}
    }

    But then it resets the with of my website to the original 1170px which I don’t wan’t.
    So I also added the title to this:

    #main-content,
    #footer,
    .footer-signature-content,
    .header-content,
    .top-navigation,
    .menu-box,
    .site-title {
    width: 975px !important;
    }

    I hoped this would keep my site 975px wide but it didn’t work.

    Theme Author TT Themes

    (@tomastoman)

    It is strange, because when I tested the custom CSS which I posted above using the Developer Tools in Opera, it worked fine. Please try to modify the CSS in the following way and insert it into “Theme Options > Other Settings > Custom CSS”:

    @media screen and (min-width: 800px) {
    html #wrapper .site-title {position: absolute !important; top: 0px !important; left: 0px !important;}
    }
    Thread Starter BalazsTU

    (@balazstu)

    Ah, there is progress! But it only works between 800 and 1012px. I tried adding this but it didn’t help:
    @media screen and (min-width: 1012px) {
    html #wrapper .site-title {position: absolute !important; top: 0px !important; left: 0px !important;}
    }

    Also, I changed the top to bottom so the title would be at the bottom of the logo but that didn’t either, although it worked before.

    Theme Author TT Themes

    (@tomastoman)

    I just have checked your child theme’s style.css through the W3C CSS validator: see results. There are some parse errors which need to be fixed. This is most probably the reason why the custom CSS I have posted above doesn’t work properly for you. Please fix the parse errors – it seems that you only need to add some closing brackets for your media queries at the end of the stylesheet.

    Best regards,
    Tomas Toman

    Thread Starter BalazsTU

    (@balazstu)

    I had to add loads of brackets and delete a space before @charset. It’s working now but only above 1012px site width. It doesn’t work below that ??

    Theme Author TT Themes

    (@tomastoman)

    It seems that there is problem with floating. Please use the following CSS, it should help:

    html #wrapper .site-title, html #wrapper #header .header-content .header-logo {float: none !important;}

    Best regards,
    Tomas Toman

    Thread Starter BalazsTU

    (@balazstu)

    It works perfectly. Thank you, Tomas.

    Regards,
    Balazs

    Theme Author TT Themes

    (@tomastoman)

    I am glad that I could help you!

    Best regards,
    Tomas Toman

    Thread Starter BalazsTU

    (@balazstu)

    Sorry Tomas, I need bit more help.
    The header is working fine now but those fixes have probably screwed up something else as the sidebar is not working again ??
    It is now have a fixed width of 300px but what I wanted was that when the screen width is less then 1012px the sidebar would become responsive and have a width of 100%. So what I added a was this:

    #sidebar {
    width: 300px !important;
    }
    .sidebar-widget {
    width: 100% !important;
    }
    @media screen and (max-width: 1012px) {
    #sidebar {
    width: 100% !important;
    }
    }

    And it worked fine until I did those fixes today. I’m not sure if the value 100% overwrites the 300px but I have no idea what to add instead. Could you advise, please?
    Thank you.

    Regards,
    Balazs

    Theme Author TT Themes

    (@tomastoman)

    Dear Balazs,

    your second #sidebar CSS selector isn’t specific enough to overwrite the first one. Please add the #wrapper ID (which wraps the whole page) to make it more specific so it overwrites the 300px value:

    #sidebar {
     width: 300px !important;
    }
    .sidebar-widget {
     width: 100% !important;
    }
    @media screen and (max-width: 1012px) {
     #wrapper #sidebar {
     width: 100% !important;
    }
    }

    Best regards,
    Tomas Toman

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Header Logo’ is closed to new replies.