Navigation in header on mobile

lauradonia

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

Hikin' Mike

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

}           

lauradonia

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

Hikin' Mike

I don't think it's possible.

Hikin' Mike

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.

lauradonia

Ok, thank you!

Hikin' Mike

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

}       

lauradonia

wow thanks so much. I will try this later on tonight and let you know how it goes! Thank you!

Anh Tu Nguyen

@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

Anh Tu Nguyen

nevermind. It's done

BeGe

> @"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

Hikin' Mike

@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.

BeGe

> @"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

Allen

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.

BeGe

> @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

Allen

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.