Nav Bar Questions

kgphotoskgphotos Registered Users Posts: 106 Major grins

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

Comments

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

    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.

  • kgphotoskgphotos Registered Users Posts: 106 Major grins
    edited May 24, 2017

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 24, 2017

    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;
                }
    
    
    }
    
  • kgphotoskgphotos Registered Users Posts: 106 Major grins
    edited May 25, 2017

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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 ;
        }  
    
  • kgphotoskgphotos Registered Users Posts: 106 Major grins

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

Sign In or Register to comment.