[Support request] Hambuger menu top bar

[David]

Wow – almost there!
So add this CSS:

@media(max-width: 768px) {
     /* Move hamburger above logo */
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        order: -1;
    }
    /* Force logo full width */
    .site-logo, .site-logo img {
        width: 100%;
    }
    /* float icons over menu bar */
    .mobile-contact-icons {
        position: absolute;
        top: 20px;
        z-index: 1;
    }
}

Then the <div> you hooked in the mobile icons – give it another class of: mobile-contact-icons

[Andrew]

Thanks for the Code David, would I still need all of this? I made some changes with the hooks and have the icons above the header already, and the logo looks good. I think all that I need as of now is the hambuger uptop now, and Ill hide the search icon with the same media query. Please take a look how it is now before I add the code and your feedback is greatly appreciated!. After this I should be all set and I will quit bugging you lol.

[Andrew]

I have just added the following for now…

@media(max-width: 768px) {
/* Move hamburger above logo */
.has-inline-mobile-toggle .mobile-menu-control-wrapper {
order: -1;
}
}

[David]

It as this part of the i provided:

/* float icons over menu bar */
.mobile-contact-icons {
    position: absolute;
    top: 20px;
    z-index: 1;
}

And:

Then the <div> you hooked in the mobile icons – give it another class of: mobile-contact-icons

That will move the hamburger up so its kinda inline with the phone/chat icons

[Andrew]

Awesome works great! Also I’ve noticed something going on with the menu on mobile I can never click on the bottom contact is when in portrait view?

Is their a way I can upload screen recording to demonstrate, I usually have to scroll twice in order to get it to respond otherwise it automatically scrolls back up to the top

[Andrew]

https://drive.google.com/file/d/1dE0VzqfwJvF14bVidNYwE-h7ikLDVmvX/view?usp=sharing

Even with the phone icon off I cant click the contact for some reason..

[David]

Try adding some bottom padding to the off canvas:

#generate-slideout-menu {
    padding-bottom: 100px;
}

[Andrew]

worked great thank you.

[David]

Glad to hear that.

[Andrew]

Hi David, hope all is well. I have one more question, what would be the easiest way to fix the mobile header, if you view the site @768px the hambuger icon and search icon are to the right of the logo, Im trying to get it to look like how it would on a phone at this point, if you make it a bit smaller(716px) you will see the correct look im trying to achieve

[Ying]

Hi Andrew,

I’m not sure I fully understand your question.

This is what I see @768px:
https://www.screencast.com/t/VcpWCWKzuKg4

And this is @716px:
https://www.screencast.com/t/VcpWCWKzuKg4

They look basically the same to me, can you tell me what are you trying to achieve exactely?

Let me know 🙂

[Andrew]

Im trying to eliminate the hamburger menu and search icon from being displayed to the left of the logo, David helped with moving up above,for mobile, and I was trying to trigger it earlier to look how it does on mobile. Below is the code he gave me which works great. Hopefully that make sense, Im basically just trying to eliminate the hambuger to the left, and search to go directly above

https://drive.google.com/drive/folders/1vdwLSHBRbsxsILUjtUPq3ltZLWrRlN7p?usp=sharing

@media(max-width: 768px) {
/* Move hamburger above logo */
.has-inline-mobile-toggle .mobile-menu-control-wrapper {
order: -1;
}
/* Force logo full width */
.site-logo, .site-logo img {
width: 100%;
}
/* float icons over menu bar */
.mobile-contact-icons {
position: absolute;
top: 20px;
z-index: 1;
}
}

https://drive.google.com/drive/folders/1vdwLSHBRbsxsILUjtUPq3ltZLWrRlN7p?usp=sharing

[Andrew]

Fixed my apologies :]

[Ying]

So it’s working now?

Let me know if you need further assistance 🙂

[Andrew]

Sort of, for the above header hook I’m using I can remove the class hide-on-tablet, But Im having a hard time getting the hambuger and search bar to float above the logo like it does on mobile, I added two more screenshots to the link I shared and removed the old ones

[Author]

Posts