[Support request] Hambuger menu top bar

Home Forums Support [Support request] Hambuger menu top bar

Home Forums Support Hambuger menu top bar

Viewing 15 posts - 16 through 30 (of 39 total)
  • Author
    Posts
  • #1864207
    David
    Staff
    Customer Support

    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

    #1864405
    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.

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

    #1865931
    David
    Staff
    Customer Support

    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

    #1869525
    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

    #1869532
    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..

    #1869931
    David
    Staff
    Customer Support

    Try adding some bottom padding to the off canvas:

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

    worked great thank you.

    #1870085
    David
    Staff
    Customer Support
    #1871717
    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

    #1871825
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1871835
    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

    #1871844
    Andrew

    Fixed my apologies :]

    #1871969
    Ying
    Staff
    Customer Support

    So it’s working now?

    Let me know if you need further assistance πŸ™‚

    #1871979
    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

Viewing 15 posts - 16 through 30 (of 39 total)
  • You must be logged in to reply to this topic.