Hamburger (Menu) Helper

bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins
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;
}

Comments

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

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

  • bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins
    > @"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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    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;}
    
    }
    
  • bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins
    > @"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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    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;}
    
    }
    
  • bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins
    > @"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!
  • bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins

    @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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    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;}
    
    }
    
  • bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins

    @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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    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;}
    
    }
    
  • bmetaylorbmetaylor Detroit, MIRegistered Users Posts: 10 Big grins

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

Sign In or Register to comment.