Options

Navigation in header on mobile

lauradonialauradonia Registered Users Posts: 18 Big grins
Hi,

I have my primary navigation in the header of my smugmug website and have it set to collapse for mobile. However, if the browser width is small but not yet the width of a smartphone, or on a tablet the menu does not collapse and the navigation overlaps w/ the logo and other elements on the page. Is there a way in CSS to change the trigger point for the size of the screen for when the menu should collapse? I know the @media rule can be used for different screen sizes, but I don't know how to use this and override the default smugmug trigger point. I imagine there must be a way to do this custom html & CSS but I haven't been able to figure it out.

My site is www.lauradoniaphotography.com

I appreciate any help that anyone can provide.

thank you, Laura

Comments

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

    I believe the collapse trigger points are controlled by Javascript, but you can use this so they at least center your logo/menu/social. Add this to your theme's CSS:

    @media only screen and ( max-width: 800px ) {
    
        .sm-user-ui .sm-page-layout .sm-page-layout-region, 
        .sm-user-ui .sm-page-layout .sm-page-layout-row, 
        .sm-user-ui .sm-page-layout .sm-page-layout-row .sm-page-layout-column {
            display: block !important;
            float: none !important;
            width: 100% !important;
            }
    
        .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal{
            text-align: center;
            }
    
            .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child {
                margin-right: 24px;
                }   
    
    }           
    
  • Options
    lauradonialauradonia Registered Users Posts: 18 Big grins
    Mike, thank you SO much for this! The wrapping/overlapping was driving me nuts - this is a great alternative since I can't specify when to collapse. Thank you! It works like a charm!

    Do you happen to know if it is possible to change the style/location of the collapsed menu to use the hamburger/toggle style vs. the drop down (similar to the style smugmug uses in their site?)

    thanks!

    Laura
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,450 Major grins

    Let me rephrase that. I don't think it's possible to substitute the hamburger menu to the word 'Menu'. You can add the hamburger icon \E039 before/after it and probably style it so it will display under the 'Menu'. You may be able to move it to the top, but I haven't tried. I can play around later.

  • Options
    lauradonialauradonia Registered Users Posts: 18 Big grins
    Ok, thank you!
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,450 Major grins

    Not sure if this is what you're looking for. This will add the hamburger menu on top of the 'Menu' text, top and right.

    @media only screen and (max-width: 800px) {
    
        .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center{
            text-align: left;
            margin-top: -10px;
            }
    
        .sm-user-ui .sm-page-widget-13009851 .sm-page-widget-content {
            padding-top: 0 !important;
            }   
    
        .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: 96px;
            width: 96px;
            content: '\E039 ';
            display: block;
            margin:0 5px 32px auto;
            }   
    
        .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: #fff;
            }   
    
        .sm-user-ui .sm-page-widget-nav {
            position: absolute;
            top: 0;
            right: 0;
            }
    
    }       
    
  • Options
    lauradonialauradonia Registered Users Posts: 18 Big grins
    wow thanks so much. I will try this later on tonight and let you know how it goes! Thank you!
  • Options
    Anh Tu NguyenAnh Tu Nguyen Registered Users Posts: 71 Big grins

    @Hikin' Mike said:
    Not sure if this is what you're looking for. This will add the hamburger menu on top of the 'Menu' text, top and right.

    @media only screen and (max-width: 800px) {
    
      .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center{
          text-align: left;
          margin-top: -10px;
          }
          
      .sm-user-ui .sm-page-widget-13009851 .sm-page-widget-content {
          padding-top: 0 !important;
          }   
    
      .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: 96px;
          width: 96px;
          content: '\E039 ';
          display: block;
          margin:0 5px 32px auto;
          }   
          
      .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: #fff;
          }   
          
      .sm-user-ui .sm-page-widget-nav {
          position: absolute;
          top: 0;
          right: 0;
          }
          
    }     
    

    Thank you Mike. It works on my english-version of my website. But since I have another nav bar for the german-version, it doesn't work on the german page. Which part of the code do I need to change?
    http://www.tunguyenwedding.com/Eng
    http://www.tunguyenwedding.com/Deu

  • Options
    BeGeBeGe Registered Users Posts: 7 Big grins
    > @"Hikin' Mike" said:
    > Not sure if this is what you're looking for. This will add the hamburger menu on top of the 'Menu' text, top and right.
    >
    > @media only screen and (max-width: 800px) { .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center{ text-align: left; margin-top: -10px; } .sm-user-ui .sm-page-widget-13009851 .sm-page-widget-content { padding-top: 0 !important; } .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: 96px; width: 96px; content: '\E039 '; display: block; margin:0 5px 32px auto; } .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: #fff; } .sm-user-ui .sm-page-widget-nav { position: absolute; top: 0; right: 0; } }

    > @"Hikin' Mike" said:
    > I believe the collapse trigger points are controlled by Javascript, but you can use this so they at least center your logo/menu/social. Add this to your theme's CSS:
    >
    > @media only screen and ( max-width: 800px ) { .sm-user-ui .sm-page-layout .sm-page-layout-region, .sm-user-ui .sm-page-layout .sm-page-layout-row, .sm-user-ui .sm-page-layout .sm-page-layout-row .sm-page-layout-column { display: block !important; float: none !important; width: 100% !important; } .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal{ text-align: center; } .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child { margin-right: 24px; } }

    *******************************


    Hi Mike,
    Im new to Smugmug, and have the same requirement to convert my mobile menu bar to hamburger menu. Can you help me to understand where should I be adding the above CSS code in Smugmug..?

    My website is: www.binoygeorgephotography.com

    Thanks
    Binoy
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,450 Major grins
    edited March 17, 2017

    @BeGe said:
    Hi Mike,

    Im new to Smugmug, and have the same requirement to convert my mobile menu bar to hamburger menu. Can you help me to understand where should I be adding the above CSS code in Smugmug..?

    My website is: www.binoygeorgephotography.com

    Thanks
    Binoy

    I put all of my CSS into my theme's CSS.

  • Options
    BeGeBeGe Registered Users Posts: 7 Big grins
    > @"Hikin' Mike" said:
    > @BeGe said:
    > Hi Mike,
    >
    > Im new to Smugmug, and have the same requirement to convert my mobile menu bar to hamburger menu. Can you help me to understand where should I be adding the above CSS code in Smugmug..?
    >
    > My website is: www.binoygeorgephotography.com
    >
    >
    > Thanks
    > Binoy
    >
    >
    >
    >
    >
    > I put all of my CSS into my theme's CSS.

    Thanks, I found how to add to the Theme's CSS section.

    -Binoy
  • Options
    AllenAllen Registered Users Posts: 10,010 Major grins

    Remember that if you ever change themes all this will be lost if you do not transfer to new themes CSS. Personally, I'd only add CSS to theme if it directly affected the theme.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    BeGeBeGe Registered Users Posts: 7 Big grins
    > @Allen said:
    > Remember that if you ever change themes all this will be lost if you do not transfer to new themes CSS. Personally, I'd only add CSS to theme if it directly affected the theme.

    Hi @Allen, Didnot really understand your point. Are you trying to tell if i modify my existing theme, this CSS code will not work?


    -Binoy
  • Options
    AllenAllen Registered Users Posts: 10,010 Major grins

    When you add CSS to a theme's "edit CSS" it only applies when that theme is active. So any CSS changes that don't specifically apply to the theme but applies to the site in general will be lost. If you change themes, the new theme will have its own "edit CSS".

    example: If you hide the breadcrumb it has nothing to do with the theme so it should be in the site CSS. The CSS would be lost if you did not put it in the new theme. This can be done but you'd have to go thru the old theme CSS edit box and find only the CSS parts that would need to be transferred. Not always easy.

    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.