Nav Bar Questions

kgphotos

A few nav bar questions... First, when I view my site on a mobile device in portrait mode, my menu bar comes between my header and logo. Is there a way I can move the menu bar below my logo? So it reads, Karen Grant Photography on one line, then my logo text "Imagine. Live. Capture." , then the menu bar.

Second, I would like to remove the lines underneath the links in the menu bar when viewed on a mobile device. How would I do that? See attached screenshot.

Lastly, when I view my site on a mobile device in horizontal mode the menu bar gets jumbled. I would like to use the hamburger icon just for mobile devices when in horizontal mode. So, I would like my header text to the left and the hamburger icon on the right. I tried bits and pieces of coding for this icon, but can't seem to get it to work right.

Menu bar jumbled in horizontal mode on iPhone

Many thanks for your help.
Karen

my site... www.imaginelivecapture.com

Hikin' Mike

This will remove the "lines" in your drop-downs on mobile:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-toplinks-separator .vertical .sm-page-widget-nav-toplink {
    border: 0;
    }

This will move your menu under your "logo". You might want to re-think that because smaller devices doesn't looks so good: http://quirktools.com/screenfly/#u=http://www.imaginelivecapture.com&w=375&h=667&a=37&s=1.

@media only screen and ( max-width: 414px ) {

    .sm-page-widget-5214865 .sm-page-widget-content {
        position: absolute;
        top: 30px;
        }

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        margin-top: 20px;
        }   

}       

For your last question. I don't think it's possible. I believe SM uses Javascript to trigger mobile menu depending on screen size.

kgphotos

@Hikin' Mike
Hi Mike. Thank you for your reply. I'm just trying to clean up the way my nav bar looks on mobile devices. Is there a way to center the second row of links so it doesn't look so jumbled? I'm looking at your nav bar and you have "Contact Me" centered underneath the first row. Anyway I could do something like that on my site? I like the padding you have between the first and second row, too.

Many thanks for your help!
Karen

Hikin' Mike

Try this. This will center your name, menu and logo for screen sizes up to and including 800px.

@media only screen and ( max-width: 800px ) {

    .sm-user-ui .sm-page-layout-column[data-layout-column="0"],
    .sm-user-ui .sm-page-layout-column[data-layout-column="1"]  {
        width: 100% !important;
        }

    .sm-user-ui .sm-page-widget-18078491 .sm-page-widget-content,   
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-right, 
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-right {
        text-align: center;
        }

        .sm-user-ui .sm-page-widget-18078491 .sm-page-widget-content,
        .sm-user-ui .sm-page-widget-5214866 .sm-page-widget-content,
        .sm-user-ui .sm-page-widget-5214865 .sm-page-widget-content {
            margin: 10px 0;
            }


}

kgphotos

@Hikin' Mike
Thank you so much!!! It looks so much better! Just one more question...on your site you have the hamburger icon in the center when in portrait mode. Can I do that on my site? I would like to use the hamburger icon only when in portrait mode.

Thanks Mike!
-Karen

Hikin' Mike

@kgphotos said:
@Hikin' Mike
Thank you so much!!! It looks so much better! Just one more question...on your site you have the hamburger icon in the center when in portrait mode. Can I do that on my site? I would like to use the hamburger icon only when in portrait mode.

Thanks Mike!
-Karen

This is what I'm using so put this in your CSS:

.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;
    line-height: 0px;
    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 ;
    }  

kgphotos

@Hikin' Mike
Thanks for the code. It works great!