Custom Header with Mobile Hamburger Menu

bradtruxellbradtruxell Registered Users Posts: 5 Beginner grinner
Hello,

With some guidance of older forum topics, I created a mobile hamburger menu similar in style to SmugMug's homepage (www.smugmug.com). However, when my website is adjusted for mobile, the header height is increased, defeating the purpose of a collapsed menu.

Is there a way to fix this and make it smaller? I inserted some CSS in hopes it would correct it with no luck.

I appreciate any and all help! My website is www.bradtruxellphotography.com

Thank you!

Comments

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

    Try adding this to your theme's CSS:

    @media only screen and  ( max-width: 600px ) {
    
        .sm-user-ui .sm-page-widget .sm-page-widget-content,
        .sm-user-ui .sm-page-widget-7671708 .sm-page-widget-content {
            padding: 0 !important;
            }
    
    }   
    

    May have to adjust the max-width: 600px to suit your device.

  • bradtruxellbradtruxell Registered Users Posts: 5 Beginner grinner
    Hikin' Mike - You are awesome! I actually stumbled upon your website a few weeks back and used some of your customization CSS from there!

    One more thing, is there a way to center my logo from the top on mobile? It seems like it gets shifted upward and the padding is off when it goes to mobile.

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

    Use this instead:

    @media only screen and  ( max-width: 600px ) {
    
        .sm-user-ui .sm-page-widget .sm-page-widget-content,
        .sm-user-ui .sm-page-widget-7671708 .sm-page-widget-content,
        .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header    {
            padding: 0 !important;
            }
    
        .sm-page-widget-logo .sm-page-widget-logo-img, 
        .sm-page-widget-logo .sm-page-widget-logo-img-retina {
            margin-top: 5px;
            }
    
    }   
    
  • bradtruxellbradtruxell Registered Users Posts: 5 Beginner grinner
    edited May 9, 2017
    Hikin' Mike - That worked perfectly! Thanks so much for the awesome responses.

    It does seem, however, the mobile header interfered with the page content. It appears that the content has been shifted up very close to the header on all pages, only on mobile. Is there a way to add padding to the content that only affects mobile? This is especially apparent on the homepage buttons. They shift to the top with about a 2px gap from the header.

    Thanks again!
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 9, 2017

    You might try removing .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header and make sure you remove the , that follows .sm-user-ui .sm-page-widget-7671708 .sm-page-widget-content,.

    Other than that I'd have to look in depth and I'm watching the hockey playoffs now...lol! Go Pens! I used to live near Pittsburgh.

  • bradtruxellbradtruxell Registered Users Posts: 5 Beginner grinner
    Well, the penguins didn't do so hot last night! Darn! I'm glad to hear you're a Pen's fan!

    I tried removing the suggested but it didn't make a difference in the padding for the page content. I also tried removing some other ones at random with no luck. I'm not sure what's going on that it would affect the page content.

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

    Yeah the Pens decided to show up in the last 2 minutes of the game. I'm really not a sports guy. I'll watch the Steelers or the Pens if hear they're on TV.

    I added a margin-bottom: 25px on the header for mobiles, so just replace what you're using and use this:

    @media only screen and  ( max-width: 700px ) {
    
        .sm-user-ui .sm-page-widget .sm-page-widget-content,
        .sm-user-ui .sm-page-widget-7671708 .sm-page-widget-content,
        .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header    {
            padding: 0 !important;
            }
    
        .sm-page-widget-logo .sm-page-widget-logo-img, 
        .sm-page-widget-logo .sm-page-widget-logo-img-retina {
            margin-top: 5px;
            }
    
        .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
            margin-bottom: 25px;
            }
    
    }       
    
  • bradtruxellbradtruxell Registered Users Posts: 5 Beginner grinner
    That did it! Thanks so much for your help with this! If you're ever in the Pittsburgh area and need someone to go shoot with, feel free to contact me. I'm always up for meeting new people!
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @bradtruxell said:
    If you're ever in the Pittsburgh area and need someone to go shoot with, feel free to contact me. I'm always up for meeting new people!

    You bet. I grew up in Murrsysville and my parents live in Jeanette and other family live in Greensburgh, so I do come back occasionally.

  • dhruvmehta12dhruvmehta12 Registered Users Posts: 10 Big grins
    Hi, I am trying to make it work but the code is not doing anything! I am putting the code in my theme's custom CSS!

    --
    Dhruv Mehta
    http://www.dhruvmehtaphotography.com/

    Freelance Photographer
    Dhruv Mehta
    www.dhruvmehtaphotography.com

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 7, 2017

    @dhruvmehta12 said:
    Hi, I am trying to make it work but the code is not doing anything! I am putting the code in my theme's custom CSS!



    --

    Dhruv Mehta

    http://www.dhruvmehtaphotography.com/

    You need to turn on "Collapse for Mobile" on your menu.

  • dhruvmehta12dhruvmehta12 Registered Users Posts: 10 Big grins
    > @"Hikin' Mike" said:
    > @dhruvmehta12 said:
    > Hi, I am trying to make it work but the code is not doing anything! I am putting the code in my theme's custom CSS!
    >
    >
    >
    > --
    >
    > Dhruv Mehta
    >
    > http://www.dhruvmehtaphotography.com/
    >
    >
    >
    >
    >
    > You need to turn on "Collapse for Mobile" on your menu.

    Hey Mike, did that and it worked too, but there is another issue now, the 'about' and 'contact' are a different menu because I wanted some space between main menu and about&contact section and also wanted them smaller than the main menu and after the code, they would just cram up with the hamburger icon. Do you know a way I can keep them in the same menu with different text size or is there a different designer for mobile?

    Freelance Photographer
    Dhruv Mehta
    www.dhruvmehtaphotography.com

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

    @dhruvmehta12 said:
    Hey Mike, did that and it worked too, but there is another issue now, the 'about' and 'contact' are a different menu because I wanted some space between main menu and about&contact section and also wanted them smaller than the main menu and after the code, they would just cram up with the hamburger icon. Do you know a way I can keep them in the same menu with different text size or is there a different designer for mobile?

    Yes you can do that with one menu. This will add a 25px margin on the bottom of the 3rd menu link (Personal Projects).

    .sm-page-widget-nav-toplink:nth-child(3) {
        margin: 0 0 25px !important;
        }
    
  • dhruvmehta12dhruvmehta12 Registered Users Posts: 10 Big grins
    > @"Hikin' Mike" said:
    > @dhruvmehta12 said:
    > Hey Mike, did that and it worked too, but there is another issue now, the 'about' and 'contact' are a different menu because I wanted some space between main menu and about&contact section and also wanted them smaller than the main menu and after the code, they would just cram up with the hamburger icon. Do you know a way I can keep them in the same menu with different text size or is there a different designer for mobile?
    >
    >
    >
    >
    >
    > Yes you can do that with one menu. This will add a 25px margin on the bottom of the 3rd menu link (Personal Projects).
    >
    > .sm-page-widget-nav-toplink:nth-child(3) { margin: 0 0 25px !important; }

    Thanks a ton Mike, that worked out beautifully.

    Freelance Photographer
    Dhruv Mehta
    www.dhruvmehtaphotography.com

  • dhruvmehta12dhruvmehta12 Registered Users Posts: 10 Big grins
    > @"Hikin' Mike" said:
    > @dhruvmehta12 said:
    > Hey Mike, did that and it worked too, but there is another issue now, the 'about' and 'contact' are a different menu because I wanted some space between main menu and about&contact section and also wanted them smaller than the main menu and after the code, they would just cram up with the hamburger icon. Do you know a way I can keep them in the same menu with different text size or is there a different designer for mobile?
    >
    >
    >
    >
    >
    > Yes you can do that with one menu. This will add a 25px margin on the bottom of the 3rd menu link (Personal Projects).
    >
    > .sm-page-widget-nav-toplink:nth-child(3) { margin: 0 0 25px !important; }

    Thanks a ton Mike, that worked out beautifully.

    Freelance Photographer
    Dhruv Mehta
    www.dhruvmehtaphotography.com

Sign In or Register to comment.