Problem With Logo Position To The Left, After Inserting Hamburger Menu CSS Code

sbphotographystudiosbphotographystudio Registered Users Posts: 21 Big grins
edited September 3, 2017 in SmugMug Customization
Hey Everyone!

After 2 days of trying to position my logo to the left, after inserting the CSS code for a hamburger icon, Im fresh out of ideas to make my logo stay on the left when using a mobile device.

I need help in the following:

1. Make my logo go to the left on both portrait and landscape mode (versus staying in the center like it does now)

2. Round out the edges of the hamburger menu icon.

3. Remove the gray bar that appears under the logo and hamburger icon.

I appreciate any help. Thank you!

Comments

  • sbphotographystudiosbphotographystudio Registered Users Posts: 21 Big grins

    The following screenshot hows what Im referring to:

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    Find this:

    @media only screen and (max-width: 800px) {
    
        .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: -65px;/* adjust hamburger for your logo */
            right: 10px;
            z-index: 1;
            }
    
        .sm-page-widget-18934456 .sm-page-widget-content .sm-page-widget-logo .sm-page-widget-logo-align-left .sm-page-widget-logo .sm-page-widget-logo-align-right .sm-page-widget-logo .sm-page-widget-logo-align-center {
            text-align: left;
            display: block;
            }
    }
    

    Replace with this:

    @media only screen and (max-width: 800px) {
    
        .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: -65px;/* adjust for your logo */
            right: 10px;
            z-index: 1;
            }
    }       
    
  • sbphotographystudiosbphotographystudio Registered Users Posts: 21 Big grins

    Thanks Hikin' Mike! That code works perfectly! B)

    Is there any way of rounding out the edges of the hamburger icon?

    And one last thing, is there a way to make the hamburger icon make an "x" when you tap to open the menu?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @sbphotographystudio said:
    Thanks Hikin' Mike! That code works perfectly! B)

    Is there any way of rounding out the edges of the hamburger icon?

    No. The icon is a font and it can't be changed unless SM creates a menu icon with rounded corners.

    And one last thing, is there a way to make the hamburger icon make an "x" when you tap to open the menu?

    No. I tried a few things, but I haven't been able to do that. I'm 99% sure it can't be done without Javascript.

  • sbphotographystudiosbphotographystudio Registered Users Posts: 21 Big grins

    @Hikin' Mike Oh okay, thanks for looking into it. I really appreciate the help.

Sign In or Register to comment.