[Resolved] Mobile Menu/Header question

Home Forums Support Mobile Menu/Header question

  • This topic has 14 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1362960
    David

    Hi everyone,

    A site that is about to go live has had a feature request from the client

    This example of a site they like has a mobile menu/header that includes the logo/email-Icon/Phone-Icon and then finally the hamburger drop down
    And those 4 items remain when the menu is activated…

    Any clues on replicating that ?
    TIA, Dave

    https://www.oswaldhomes.com.au/

    Note: What I described does not appear when making a browser narrow, I had to view it on an actual phone.

    #1363116
    David
    Staff
    Customer Support

    Hi there,

    If the site is using the Mobile Header you can use a Hook Element to you own content using the inside_mobile_header hook.

    https://docs.generatepress.com/article/hooks-element-overview/

    It may require some CSS to position it. Happy to help with that.

    #1363666
    David

    Thanks David,
    I’ll give that a shot!
    Dave

    #1363693
    David
    Staff
    Customer Support
    #1364986
    David

    Hi David,
    So I have the hook working – did a proof of concept to place some text there.

    How would you recommend I add a row of three components to the left of the hamburger menu – image/icon/icon ?

    And also when the menu is clicked it covers the header area, is there a simple way to make it start below so the header area is always visible ?

    Thanks so much, Dave

    #1365344
    David
    Staff
    Customer Support

    Some markup like this would go int the hook:

    <div class="custom-menu-bar">
        <span class="custom-item"><a href="url"><img src="url_to_image_src" width="50" height="50"></a></span>
        <span class="custom-item"><a href="url"><img src="url_to_image_src" width="50" height="50"></a></span>
        <span class="custom-item"><a href="url"><img src="url_to_image_src" width="50" height="50"></a></span>
    </div>

    If you want to share a link to your concept site i can take a look.

    #1366228
    David

    Hi David,

    Back looking at this now.

    I modified your code (below) as a start to see how it looks, but nothing shows!
    So i went back to my simple test – just the word ‘test’ in a h2 header and nothing appears now!
    Not sure what has changed!

    The site is:
    https://thebeautecollective.com.au

    Below is my modified code:

    <div class="custom-menu-bar">
        <span class="custom-item"><a href="https://thebeautecollective.com.au/"><img src="https://thebeautecollective.com.au/wp-content/uploads/2020/07/Dusty-Pink-HH-2.png"></a></span>
        <span class="custom-item"><a href="#"><img src="https://thebeautecollective.com.au/wp-content/uploads/2020/07/phone-5.png"></a></span>
        <span class="custom-item"><a href="#"><img src="https://thebeautecollective.com.au/wp-content/uploads/2020/07/Email-28.png"></a></span>
    </div>

    Thanks, Dave (just the word test in H2 is there now)

    #1366468
    David
    Staff
    Customer Support

    I am not seeing anything in the Mobile Header now
    Is the Hook you added still published and have correct display rules ?

    #1366495
    David

    Thanks David, I will double check, but I thought so!
    I just checked and I did nothing, but just resaved it and now my H2 test is working.
    I replaced your code, some major changes to layout required now!
    I’ll see how I go
    Thanks, Dave

    #1367499
    David
    Staff
    Customer Support

    Instead of adding the logo image in the custom menu bar – i would add it to the Customizer > Layout > Header –> Mobile Header > Logo.

    The two icon images are slightly different sizes – best if those were the same. Happy to look at what CSS is required after making those changes.

    #1367522
    David

    Awesome, thanks so much – I’ll be working on this on Sunday…
    Dave

    #1371570
    David

    Hi David,
    Back to this now!
    I have made the two icons the same, and turned the logo back on.
    So my two icons appear.
    I need the order to be logo (left aligned)
    two icons and mobile header – right aligned in that order

    Hope that is doable ?
    (I tried adding display: inline-block to the outer div after doing some research, but no change!)

    Thanks again for your help

    I have turned on the element for just the page /test
    https://thebeautecollective.com.au/test/

    #1371775
    David
    Staff
    Customer Support

    Try adding this CSS now:

    .site-logo.mobile-header-logo {
        order: -1;
    }
    .custom-menu-bar {
        display: flex;
        align-items: center;
    }
    .custom-menu-bar .custom-item {
        margin: 0 10px;
    }
    #1371796
    David

    Thanks David,
    I just applied that, and it looks great – thanks so much…
    I may also need to add it to the desktop header too – but I’ll get back if that is needed.
    Best regards, Dave

    #1371862
    David
    Staff
    Customer Support

    Glad to be of help 🙂

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