Different LOGO

rammy25

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!

Hikin' Mike

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.

rammy25

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' Mike

You didn't use the "Share" feature:

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

rammy25

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' Mike

No problem. I'll need to see it now.

rammy25

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' Mike

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

rammy25

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

Hikin' Mike

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?

rammy25

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

Hikin' Mike

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).

rammy25

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

Hikin' Mike

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.

rammy25

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' Mike

@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.

rammy25

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.