multiple logo coding clarification

  • Author
    Posts
  • #154809

    jwjmcghie
    Member
    Original poster

    Hi,

    Im just in the process of finalising my website hosted by word press.

    Below is the script suggested in other posts to have the logo change once the scrolling scroll header drops

    The issue Im now having is the mobile website versions have the wrong coloured logo.

    Is there a way to either change the logo for the mobile sites only, or alternatively have the script below control the base site logo and the wordpress logo upload control the scroll header logo.

    Ive also tried checking the box option to “Include this CSS in the Mobile Theme” and it doesnt make a difference whether checked or not. Or perhaps its easier to change the header bar colour on the mobile sites? Im not sure.

    Thank you for your help

    @media (min-width: 768px) {
    #masthead.scroll-header .site-logo-link img {
    display: none;
    }

    #masthead.scroll-header .site-logo-link::before {
    background-image: url(‘https://featuresofdistinctioncom.files.wordpress.com/2020/05/fod-logo-black-tight-website.png’);
    background-size: 320px 60px;
    display: block;
    width: 320px;
    height: 60px;
    content: “”;
    }
    }

    The blog I need help with is: featuresofdistinctioncom.wordpress.com

    #154810

    jwjmcghie
    Member
    Original poster

    To clarify the css script allows for the PC based website to operated as desired.

    #154818

    tarasdashkevych
    Theme Author

    Hello,

    Could you please make your site public, so I can inspect the issue and provide a solution for you? You can make it private again, once we are done with this issue.

    Kind regards,
    Taras

    #154870

    jwjmcghie
    Member
    Original poster

    Hey Taras,

    Sorry for the hassle, Ive made it public for you.

    http://www.featuresofdistinction.com

    Thank you for your help.

    Jared

    #154935

    tarasdashkevych
    Theme Author

    Hello Jared,
    Thank you for making your site public.

    Please also add this custom CSS to your site:

    
    @media (max-width: 768px) {
      .site-branding img {
        display: none;
      }
      
      .site-branding .custom-logo-link::before {
        background-image: url(https://featuresofdistinctioncom.files.wordpress.com/2020/05/fod-logo-black-tight-website.png);
        background-size: 320px 60px;
        display: block;
        width: 320px;
        height: 60px;
        content: "";
        margin: 0 auto;
      }
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #154944

    jwjmcghie
    Member
    Original poster

    Thank you Taras,

    The logo now displays on mobile versions also.

    Is it possible to have the logo scale in size depending on which platform it is viewed on?

    At the moment the logo extends off the side of the screen when viewing it on a phone.

    Thank you again, I really appreciate your help.

    Jared

    #154956

    tarasdashkevych
    Theme Author

    Jared,

    “At the moment the logo extends off the side of the screen when viewing it on a phone.”
    – Please also add this custom CSS to change the logo size in mobile views:

    
    @media (max-width: 500px) {
      .site-branding .custom-logo-link::before {
        background-size: 220px 45px;
        width: 220px;
        height: 45px;
        background-repeat: no-repeat;
      }
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #155027

    jwjmcghie
    Member
    Original poster

    Hey Taras,

    Thank you for your help. I just realised that after all that the logos werent functioning properly across all viewing platforms. Could we start again? I have removed all additional css code relating to the logos. My apologies for the hassle.

    Im trying to achieve the following:

    – On the desktop website, the white logo should show initially at the top of every page
    – Once scrolling down begins the dropdown scrolling menu appears and that should be the black logo

    – On the mobile phone version of the website it should be the black logo only

    The white logo url is “https://featuresofdistinction.com/wp-content/uploads/2020/05/fod-logo-white-tight-website.png”

    The black logo url is”https://featuresofdistinction.com/wp-content/uploads/2020/05/fod-logo-black-tight-website.png”

    website: https://featuresofdistinction.com/

    thank you for your help.

    Jared

    #155043

    tarasdashkevych
    Theme Author

    Hello Jared,

    Good thinking. Please try this custom CSS:

    
    @media (min-width: 768px) {
        .site-header:not(.scroll-header) .site-branding img {
            display: none;
        }
    
        .site-header:not(.scroll-header) .site-branding .custom-logo-link::before {
            background-image: url(https://featuresofdistinction.com/wp-content/uploads/2020/05/fod-logo-white-tight-website.png);
            background-size: 380px 70px;
            background-repeat: no-repeat;
            display: block;
            width: 380px;
            height: 70px;
            content: "";
            margin: 0 auto; 
        }
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #155063

    jwjmcghie
    Member
    Original poster

    Thats works perfectly across all platforms thank you!!!

    #155081

    tarasdashkevych
    Theme Author

    You are very welcome! :)

The topic ‘multiple logo coding clarification’ is closed to new replies.