Different LOGO

rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
edited May 20, 2020 in SmugMug Customization
Can I have one logo for my desktop site and one for my mobile site, or how can I make my header smaller on mobile site? Thank you!

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    I would use a HTML/CSS Block. In the HTML you would do something like this:

    <div class="my-logo">
      <a href="your-home-page-url-here">
        <img src="your-desktop-logo-URL-here" class="desktop" />
        <img src="your-mobile-logo-URL-here" class="mobile" />
      </a> 
    </div>
    

    And CSS here:

    .mobile {display: none;}
    
    @media (max-width: 736px) {
    
      .mobile {display: block;}
      .desktop {display: none;}
    
    }
    

    Use the Share Link to get your two logo URL and change "your-home-page-url-here" to your home page.

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
    edited May 20, 2020
    Thank you, I try but it didn't work, I admit in css I'm just a copy paste user . My site is just for my family https://mark-christian.smugmug.com/ and I'm happy with my desktop view but in mobile view my header is just too big.
    I add this to entire site:
    <div class="my-logo">
    <a href="http://mark-christian.smugmug.com">
    <img src="http://mark-christian.smugmug.com/Sample-Homepage-Slideshow/n-SbMPsJ/i-XXG25NB/A" class="desktop" />
    <img src="http://mark-christian.smugmug.com/Sample-Homepage-Slideshow/n-SbMPsJ/i-r5tV9b4/A" class="mobile" />
    </a>
    </div>.

    css

    .mobile {display: none;}

    @media (max-width: 736px) {

    .mobile {display: block;}
    .desktop {display: none;}

    }

    and you can see the results
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    You didn't use the "Share" feature:

    Then copy the "Photo Only", not the Photo Link.

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
    I told you My BAD , thank you again my logo is display but my theme logo (name and photo ) is still display on mobile and the new logo is on centre off the screen is not align with my hamburger menu . I would like my logo on left top page align with hamburger menu on right of the page and a white overlay.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins
  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
    edited May 23, 2020

    I didn't understood your answer, sorry to bother you but I search the web and can't find someting to work for me. My website look something like this ( Mc is the new logo and is in the centre of the screen) up-left Pic and menu is from smugmug theme(entire site), I want on mobile, to see a smaller header( also the white overlay) on the entire site even if it is the same as the smugmug theme.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    Screen shots are not helpful unfortunately. I have to see it live in order for me to help you.

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
    edited May 23, 2020

    Yes, I dissabled the password for my site. homepage is : https://mark-christian.smugmug.com. or do you mean something else ?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    I guess I don't understand what you're trying to do.

    What logo do you want on desktop?

    What logo do you want on mobile?

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
    edited May 23, 2020

    With my desktop I'm ok, on mobile is my problem

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    Okay, that what I thought, but I didn't want to spend an hour figuring out something to find out you wanted something else. I work on it and get back to you later this evening (it's 9pm here).

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins

    Ok, thank you very much ( 7 am here ).

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    It will probably need some fine adjustment. You need to replace your current Logo Block with a HTML/CSS block.

    HTML

    <div class="my-logo">
      <div class="desktop">
        <a href="https://mark-christian.smugmug.com">
          <img src="https://photos.smugmug.com/Poze/2014/Craciun-Viena/i-2mdPbGP/0/60c8d9bb/90x135/IMG_1695-90x135.jpg" />
          <h1>Mark Christian</h1>
        </a>
      </div> 
        <a href="https://mark-christian.smugmug.com"><img src="https://photos.smugmug.com/photos/i-XXG25NB/0/ff6176c6/S/i-XXG25NB-S.png" class="mobile" /></a> 
    </div>
    

    CSS

    .my-logo {margin-left: 15px;}
    
    .desktop img {
      float: left;
      border-radius: 50%;
      margin-right: 10px;
    }
    
    .desktop h1 {
      font-size: 60px;
      line-height: 1.5;
      letter-spacing: 2px;
    }
    
    .mobile {display: none;}
    
    @media (max-width: 736px) {
    
      .mobile {display: block;}
      .desktop {display: none;}
    
    }
    

    Your mobile logo has a lot of extra space around it and you should probably trim it to just the logo.

    You can remove the first HTML/CSS you used earlier.

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins
    edited May 23, 2020

    Thank you a lot, without you I never figure it out

    One small question: "Can I make the white overlay even smaller on mobile ( I crop my logo to 80x80) ?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,857 Major grins

    @rammy25 said:
    Thank you a lot, without you I never figure it out

    One small question: "Can I make the white overlay even smaller on mobile ( I crop my logo to 80x80) ?

    There is a 12px top/bottom padding for mobiles, so add this to your CSS to get rid of it: .sm-user-ui .sm-page-widget-28158039 .sm-page-widget-content {padding: 0 !important;}

    That code is just for your HTML/CSS Block for your logo only.

  • rammy25rammy25 romaniaRegistered Users Posts: 9 Big grins

    I add it to the bottom HTML/CSS but doesn't seem to work, but I found an older post (also you)

    @media only screen and ( max-width: 700px ) {

    .sm-user-ui .sm-page-widget .sm-page-widget-content,
    .sm-user-ui .sm-page-widget-7671708 .sm-page-widget-content,
    .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header    {
        padding: 0 !important;
        }
    
    .sm-page-widget-logo .sm-page-widget-logo-img, 
    .sm-page-widget-logo .sm-page-widget-logo-img-retina {
        margin-top: 5px;
        }
    
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
        margin-bottom: 25px;
        }
    

    }

    and add it to a new content block css, changed the widget number, and it seems to do the trick.
    Again thank you for your help and patience.

Sign In or Register to comment.