Hamburger (Menu) Helper

bmetaylor

Using the code provided in the forum, I was able to get a hamburger menu up and running for my mobile site. Thank you!

One little tweak that I would like to make is to lessen the gap between my header and the slideshow on my homepage. I've tried changing a number of settings and can't seem to figure it out.

bill-taylor.smugmug.com

Here is the code i used for the menu....Thanks!

/**
* Hamburger Menu for Mobile Devices
* Centers Logo, Menu to the Left
****************************************************************/
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
text-align: left;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 48px;
width: 48px;
line-height: 24px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
position: absolute;
top: -60px;/* adjust for your logo */
right: 10px;
z-index: 1;
}

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
float: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

Hikin' Mike

Try this: .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding; 0 !important;}

bmetaylor

> @"Hikin' Mike" said:
> Try this: .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding; 0 !important;}

Unfortunately, this didn't seem to have any effect on the gap. Any other options?

Thank you...

Hikin' Mike

Sorry, I forgot this was for your mobile so I forgot the @media:

@media (max-width: 736px) { 

  .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding; 0 !important;}

}

bmetaylor

> @"Hikin' Mike" said:
> Sorry, I forgot this was for your mobile so I forgot the @media:
>
> @media (max-width: 736px) { .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding; 0 !important;}}

Still not working. It is happening in all mobile browsers, but looks perfect on a PC.

Hikin' Mike

It worked in the webtool, but I didn't copy/paste it here correctly. I added ; instead of : after the padding. Verified this works. Bad day today...lol!

@media (max-width: 736px) { 

  .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}

}

bmetaylor

> @"Hikin' Mike" said:
> It worked in the webtool, but I didn't copy/paste it here correctly. I added ; instead of : after the padding. Verified this works. Bad day today...lol!
>
> @media (max-width: 736px) { .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}}

Thank you, Mike! Really appreciate your help!

bmetaylor

@bmetaylor said:

@Hikin' Mike said:
It worked in the webtool, but I didn't copy/paste it here correctly. I added ; instead of : after the padding. Verified this works. Bad day today...lol!

@media (max-width: 736px) { .sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}}

Thank you, Mike! Really appreciate your help!

Hi Mike.... I am SOOOO sorry to bother you with this, but I accidentally changed my site theme without realizing it. When I changed it back, I realized that I lost all of the CSS we added to reduce the gap between the header and slideshow on my homepage. I went back to this thread and recreated what you helped me with, but the gap is back. I was hoping that you could help me with whatever I messed up.

Here is what I have.....

/**

• Hamburger Menu for Mobile Devices
• Centers Logo, Menu to the Left
  ****************************************************************/
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
  text-align: left;
  }

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 48px;
width: 48px;
line-height: 24px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
position: absolute;
top: -60px;/* adjust for your logo */
right: 10px;
z-index: 1;
}

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
float: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}

}

Hikin' Mike

Looks like you removed the specific widget, .sm-page-widget-28161879 with a new one. You need to remove this:

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}

}

Use this instead.

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28200410 .sm-page-widget-content {padding: 0 !important;}

}

bmetaylor

@Hikin' Mike said:
Looks like you removed the specific widget, .sm-page-widget-28161879 with a new one. You need to remove this:

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}

}

Use this instead.

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28200410 .sm-page-widget-content {padding: 0 !important;}

}

That didn't seem to do anything. Still has the gap. Here is my code after your last suggestion.....

/**

• Hamburger Menu for Mobile Devices
• Centers Logo, Menu to the Left
  ****************************************************************/
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
  text-align: left;
  }

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 48px;
width: 48px;
line-height: 24px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
position: absolute;
top: -50px;/* adjust for your logo */
right: 10px;
z-index: 1;
}

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
float: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28200410 .sm-page-widget-content {padding: 0 !important;}

}

Hikin' Mike

Try adding this one too .sm-page-widget-28200411:

@media (max-width: 736px) {

  .sm-user-ui .sm-page-widget-28200410 .sm-page-widget-content,
  .sm-user-ui .sm-page-widget-28200411 .sm-page-widget-content {padding: 0 !important;}

}

bmetaylor

@Hikin' Mike said:
Try adding this one too .sm-page-widget-28200411:

@media (max-width: 736px) {

  .sm-user-ui .sm-page-widget-28200410 .sm-page-widget-content,
  .sm-user-ui .sm-page-widget-28200411 .sm-page-widget-content {padding: 0 !important;}

}

Perfect! Thank you so much!