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

sbphotographystudio

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!

sbphotographystudio

The following screenshot hows what Im referring to:

Hikin' Mike

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;
        }
}       

sbphotographystudio

Thanks Hikin' Mike! That code works perfectly!

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' Mike

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

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.

sbphotographystudio

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