Custom Header with Mobile Hamburger Menu

bradtruxell

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!

Hikin' Mike

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.

bradtruxell

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' Mike

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

}   

bradtruxell

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' Mike

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.

bradtruxell

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' Mike

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

}       

bradtruxell

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' Mike

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

dhruvmehta12

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/

Hikin' Mike

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

dhruvmehta12

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

Hikin' Mike

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

dhruvmehta12

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

dhruvmehta12

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