Hamburger Menu and logo image customization

dipanjan94 · February 17, 2022

I recently added a new logo for my Smugmug website https://www.dipanjanpal.com/ and noticed that for mobile, the logo and the hamburger menu are not aligned properly as you can see in the following image. How can I push my hamburger menu slightly upwards?

My second question is - my default logo is in black. However, I want to use the white version of my logo for two pages (my homepage, and the page https://www.dipanjanpal.com/Blog ). The white version of my logo can be found here. How can I make the changes?
The white version of my logo can be found here - https://photos.smugmug.com/photos/i-SRSt9KR/0/747e561f/X3/i-SRSt9KR-X3.png

Hikin' Mike · February 17, 2022

@dipanjan94 said:
I recently added a new logo for my Smugmug website https://www.dipanjanpal.com/ and noticed that for mobile, the logo and the hamburger menu are not aligned properly as you can see in the following image. How can I push my hamburger menu slightly upwards?

In the tutorial (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu), you are missing transform: translateY(-100%);. Currently you are showing this:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
  position: absolute;
  top: -65px;
  right: 10px;
  z-index: 1;
}

Add transform: translateY(-100%); then you can probably change the top: -65px to around -45px.

Hikin' Mike · February 17, 2022

@dipanjan94 said:
My second question is - my default logo is in black. However, I want to use the white version of my logo for two pages (my homepage, and the page https://www.dipanjanpal.com/Blog ). The white version of my logo can be found here. How can I make the changes?
The white version of my logo can be found here - https://photos.smugmug.com/photos/i-SRSt9KR/0/747e561f/X3/i-SRSt9KR-X3.png

Add a second Logo Block with your white logo. Add this to your theme's custom CSS section:

.sm-page-home .sm-page-widget-xxxxxxxx,
.sm-page-node-qmXX6x .sm-page-widget-xxxxxxxx {
  display: block;
}

.sm-page-widget-xxxxxxxx,
.sm-page-home .sm-page-widget-26465994,
.sm-page-node-qmXX6x .sm-page-widget-26465994 {
  display: none;
}

You will need to find what that Logo Block widget number is a and change the .sm-page-widget-xxxxxxxx to that number. If you don't know how to find that number, this should help: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Locating-Your-SmugMugs-Node-or-Widget-Number

dipanjan94 · February 19, 2022

You will need to find what that Logo Block widget number is a and change the .sm-page-widget-xxxxxxxx to that number.

I tried adding a second logo block, the widget number is 31836292.

I added the following code

.sm-page-home .sm-page-widget-31836292,
.sm-page-node-qmXX6x .sm-page-widget-31836292 {
  display: block;
}

.sm-page-widget-31836292,
.sm-page-home .sm-page-widget-26465994,
.sm-page-node-qmXX6x .sm-page-widget-26465994 {
  display: none;
}

It did not seem to work properly. The logo vanished from the Home and Blog page. Also in mobile, there is no logo/hamburger menu for the Home and Blog page.

For the rest of the pages, it looks fine. Could you tell me what I'm doing wrong?

Hikin' Mike · February 19, 2022

EDIT:

Looks like you added some wrong notes here: ** logo customization white and black**. It should say /** logo customization white and black**/.

Even with that the way you added the second logo (beside the black logo), it might be easier to just remove both Logo Blocks and use one HTML:

HTML

<a href="http://www.dipanjanpal.com/">

  <img data-image-mask-shape="none" class="sm-page-widget-logo-img black-logo" src="https://cdn.smugmug.com/img/spacer.gif" style="background: url(&quot;https://photos.smugmug.com/photos/i-74s99Bt/0/e510a04b/350x124/i-74s99Bt-350x124.png&quot;) center center / contain no-repeat; width: 350px; height: 124px;">

  <img data-image-mask-shape="none" class="sm-page-widget-logo-img white-logo" src="https://cdn.smugmug.com/img/spacer.gif" style="background: url(&quot;https://photos.smugmug.com/photos/i-SRSt9KR/0/747e561f/350x124/i-SRSt9KR-350x124.png&quot;) center center / contain no-repeat; width: 350px; height: 124px;">

</a>

CSS

.sm-page-home .white-logo,
.sm-page-node-qmXX6x .white-logo {
  display: block;
}

.white-logo,
.sm-page-home .black-logo,
.sm-page-node-qmXX6x .black-logo {
  display: none;
}

That should work.

dipanjan94 · February 20, 2022

Hi Mike, I removed both the logo blocks and added an HTML block like you mentioned.

However, I don't see the white logo being reflect in Home/Blog page. What am I doing wrong?

Hikin' Mike · February 20, 2022

@dipanjan94 said:
Hi Mike, I removed both the logo blocks and added an HTML block like you mentioned.

However, I don't see the white logo being reflect in Home/Blog page. What am I doing wrong?

You didn't do anything wrong. SmugMug automatically adds the widget number in that CSS which doesn't work for this application. You need to remove the CSS in the CSS section of your HTML/CSS Block and add it to your Theme's Custom CSS Section like I explained here: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

Hamburger Menu and logo image customization

Comments