Stretching a picture into transparent header and other mobile customizations

dipanjan94

Hello, my website is https://www.dipanjanpal.com/

1. I somehow do not like the white header on top of my website. I want my cover image (aurora) to be the background of the header (essentially having a transparent header). I tried to choose it as a background image of my theme, but in that case my first text box overlaps with the image and everything looks messy.

2. Is there any option to open the hamburger menu as a slider from right in mobile (like beiter.dk or gardarolafs.is)? If not, I would like to have a opaque background on the menu whenever someone clicks on the hamburger. Can anyone please help me with this?

3. Since mobile displays mostly favour vertical images, is it possible that for a landscape image in my website, I only show a vertical crop of the same image in the mobile version? If yes, then how?

Hikin' Mike

@dipanjan94 said:
2. Is there any option to open the hamburger menu as a slider from right in mobile (like beiter.dk or gardarolafs.is)? If not, I would like to have a opaque background on the menu whenever someone clicks on the hamburger. Can anyone please help me with this?

This should do the trick: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Off-Canvas-Navigation-Menu-For-SmugMug

I'll look into the other issues.

Hikin' Mike

@dipanjan94 said:
1. I somehow do not like the white header on top of my website. I want my cover image (aurora) to be the background of the header (essentially having a transparent header). I tried to choose it as a background image of my theme, but in that case my first text box overlaps with the image and everything looks messy.

I assume this is only for your home page, so you can add a CSS Block on your home page and add this:

.sm-user-ui.sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.sm-user-ui.sm-page-home .sm-page-widget-nav-color-emphasized a,
.sm-user-ui.sm-page-home .sm-page-widget-nav-color-emphasized a:visited {color:white;}

You can then change the Logo Text Block from black to white if that's what you want.

3. Since mobile displays mostly favour vertical images, is it possible that for a landscape image in my website, I only show a vertical crop of the same image in the mobile version? If yes, then how?

If I understand correctly, you don't want to show landscape-format images when a user has a small screen? The only way you're going to make this work is to create a Folder for only Mobile devices and one for larger screens. Then use @media queries to hide/show the two screen sizes.

Hikin' Mike

@dipanjan94 said:
3. Since mobile displays mostly favour vertical images, is it possible that for a landscape image in my website, I only show a vertical crop of the same image in the mobile version? If yes, then how?

You know you can tilt the mobile 90 degrees to landscape and view them.

dipanjan94

You can then change the Logo Text Block from black to white if that's what you want.

Hey Mike, this worked out really well. I just want two additional things - a) My logo text to be white ONLY for the homepage and black (default) for the other pages, and b) The colour of sub-menu text to be black.

Can you please help me regarding these?

Hikin' Mike

Not sure how you changed the logo text, but remove it and add this:
.sm-user-ui.sm-page-home h1 {color:white;}

For the second question, remove this:

.sm-user-ui.sm-page-home .sm-page-widget-nav-color-emphasized a,
.sm-user-ui.sm-page-home .sm-page-widget-nav-color-emphasized a:visited {color:white;}

Use this instead.
.sm-user-ui.sm-page-home .sm-page-widget-nav-toplink > a {color:white;}

dipanjan94

This should do the trick: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Off-Canvas-Navigation-Menu-For-SmugMug

I tried and I was able to make it from the code, but I want it to show only for mobile version and not for big screens.
Also, I want it to place on top right of mobile screen when someone is viewing my the website (exactly where my current hamburger is placed but it is not off-canvas at the moment). Which line of code should I change to properly place the off-canvas hamburger?

dipanjan94

If I understand correctly, you don't want to show landscape-format images when a user has a small screen? The only way you're going to make this work is to create a Folder for only Mobile devices and one for larger screens. Then use @media queries to hide/show the two screen sizes.

Yes, this is exactly what I want! Do I have to make a new folder, or a new gallery would do?

dipanjan94

Not sure how you changed the logo text, but remove it and add this:
.sm-user-ui.sm-page-home h1 {color:white;}

This didn't make the logo white for the homepage for some reason. Could you please check and tell me if I'm doing something wrong?

For the second question, remove this:

.sm-user-ui.sm-page-home .sm-page-widget-nav-color-emphasized a,
.sm-user-ui.sm-page-home .sm-page-widget-nav-color-emphasized a:visited {color:white;}

Use this instead.
.sm-user-ui.sm-page-home .sm-page-widget-nav-toplink > a {color:white;}

This worked, however just one additional thing is missing. I want the hover colour to be present on my top-level menu (it is present for sub-menu but not top level). Can you please help me?

I know I'm asking a lot of questions, but I'm sorry since I can't really do this myself.

Hikin' Mike

@dipanjan94 said:
Yes, this is exactly what I want! Do I have to make a new folder, or a new gallery would do?

You will need to create a Folder for Mobile and one for Desk Top. You will also have to create two Menus, one for Mobile and one for Desk Top.

It's going to get complicated quickly.

Hikin' Mike

@dipanjan94 said:

Not sure how you changed the logo text, but remove it and add this:
.sm-user-ui.sm-page-home h1 {color:white;}

This didn't make the logo white for the homepage for some reason. Could you please check and tell me if I'm doing something wrong?

You are using a custom color on your logo block. Edit your Logo Block: 'Logo > Text Color' . Set it to default.

This worked, however just one additional thing is missing. I want the hover colour to be present on my top-level menu (it is present for sub-menu but not top level). Can you please help me?

.sm-user-ui.sm-page-home .sm-page-widget-nav-toplink > a:hover {color: #26B0FC;}

dipanjan94

You are using a custom color on your logo block. Edit your Logo Block: 'Logo > Text Color' . Set it to default.

Thank you. This worked perfectly.

If I understand correctly, you don't want to show landscape-format images when a user has a small screen? The only way you're going to make this work is to create a Folder for only Mobile devices and one for larger screens. Then use @media queries to hide/show the two screen sizes.

I don't want this to apply to all images throughout my website. I just want it for that first homepage image (aurora one) when someone opens my website, that's all. For the desktop, it's fine.
For mobile, I want this photo - https://www.dipanjanpal.com/ChuckNorris/n-SLFZNV/i-QHCbbPX/A to be the first one. Is it possible to do this?

Hikin' Mike

@dipanjan94 said:
I don't want this to apply to all images throughout my website. I just want it for that first homepage image (aurora one) when someone opens my website, that's all. For the desktop, it's fine.
For mobile, I want this photo - https://www.dipanjanpal.com/ChuckNorris/n-SLFZNV/i-QHCbbPX/A to be the first one. Is it possible to do this?

Ah, well that's easy.

Remove your top image and add a HTML/CSS block.

Add this to your HTML Section:

<img src="https://photos.smugmug.com/photos/i-g3tKpXr/0/X3/i-g3tKpXr-X3.jpg" class="desktop">
<img src="https://photos.smugmug.com/photos/i-QHCbbPX/0/X2/i-QHCbbPX-X2.jpg" class="mobile">

Add this to your CSS Section:

.mobile,
.desktop {
  width: 100%;
  max-width: 100%;
}

.mobile {display:none;}

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

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

}

You will probably have to add some CSS to remove the left/right padding once you have this in place.

Hikin' Mike

@dipanjan94 said:
I tried and I was able to make it from the code, but I want it to show only for mobile version and not for big screens.

Add this to your THEME'S CUSTOM CSS SECTION: (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website).

.container {display: none;}

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

  .container {display: block;}
  .sm-page-widget-nav-mobile {display: none;}

}

Also, I want it to place on top right of mobile screen when someone is viewing my the website (exactly where my current hamburger is placed but it is not off-canvas at the moment). Which line of code should I change to properly place the off-canvas hamburger?

Can't help any more until I see it.

dipanjan94

@Hikin' Mike said:

@dipanjan94 said:
I don't want this to apply to all images throughout my website. I just want it for that first homepage image (aurora one) when someone opens my website, that's all. For the desktop, it's fine.
For mobile, I want this photo - https://www.dipanjanpal.com/ChuckNorris/n-SLFZNV/i-QHCbbPX/A to be the first one. Is it possible to do this?

Ah, well that's easy.

Remove your top image and add a HTML/CSS block.

Add this to your HTML Section:

<img src="https://photos.smugmug.com/photos/i-g3tKpXr/0/X3/i-g3tKpXr-X3.jpg" class="desktop">
<img src="https://photos.smugmug.com/photos/i-QHCbbPX/0/X2/i-QHCbbPX-X2.jpg" class="mobile">

Add this to your CSS Section:

.mobile,
.desktop {
  width: 100%;
  max-width: 100%;
}

.mobile {display:none;}

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

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

}

You will probably have to add some CSS to remove the left/right padding once you have this in place.

Thank you so much for this! Worked like a charm, and now I love my website!

Just one final request before I can launch my website - for the mobile version, I have chosen to use the normal hamburger menu only (not off-canvas). Currently, I think the background is set to be 100% transparent. It is difficult to read menu items on the picture and for mobiles, I would want the transparency to be around 30/40%. Can you please help me do it?

Hikin' Mike

@dipanjan94 said:
Just one final request before I can launch my website - for the mobile version, I have chosen to use the normal hamburger menu only (not off-canvas). Currently, I think the background is set to be 100% transparent. It is difficult to read menu items on the picture and for mobiles, I would want the transparency to be around 30/40%. Can you please help me do it?

.sm-user-ui.sm-page-home .sm-accordion {background-color: rgba(0,0,0,.3)}

The last number, .3 is the transparency. 0 is transparent and 1 is solid.

dipanjan94

Thank you so much! That solved it.

If I want to change the colour of the hamburger icon (currently black, and I want it white), what do I need to do?

Hikin' Mike

.sm-user-ui.sm-page-home .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {color:white;}

dipanjan94

@Hikin' Mike said:
.sm-user-ui.sm-page-home .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {color:white;}

Worked perfectly as usual! Thank you so much for your help!

I noticed one more thing - whenever I'm on mobile, and I click Hamburger Menu > Contact, the contact pop up comes up. However, my menu items are still visible on top of that popup, making it difficult for a viewer to see the contact form. Is there any fix to this?

Hikin' Mike

@dipanjan94 said:
I noticed one more thing - whenever I'm on mobile, and I click Hamburger Menu > Contact, the contact pop up comes up. However, my menu items are still visible on top of that popup, making it difficult for a viewer to see the contact form. Is there any fix to this?

Took a little to find it, but if you find this:

.sm-user-ui.sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
  position: absolute;
  z-index: 1000;
  width: 100%;
}

Change the z-index: 1000 to z-index: 1. Guess I went overboard with the z-index.

dipanjan94

Change the z-index: 1000 to z-index: 1. Guess I went overboard with the z-index.

Worked like a charm! Thanks again, Mike!