[Resolved] Horizontal stack elements in HTML mobile header

Home Forums Support Horizontal stack elements in HTML mobile header

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1045535
    Jason

    Hi
    I am attempting to add html elements to mobile header using a hook at inside_mobile_header with the following code:

    <style type=”text/css”>
    .inside-fixed-mobile-footer {
    margin:auto; border-width:1px}
    .book{padding:5px}
    </style>

    I remove header logo with the intention of having 4 buttons plus hamburger option in a horizontal line.
    However the buttons all stack vertically on the left with the hamburger menu on the right. Is there a way to stack them evenly horizontally across the mobile header?

    #1045562
    David
    Staff
    Customer Support

    Hi there,

    try wrapping your <i> elements in a span tag:

    eg. <span><i class=”fa”></i><i class=”fa”></i><i class=”fa”></i><i class=”fa”></i></span>

    If not can you provide a link to the site so i can take a look?
    You can edit your first post in this topic and use the Site URL field to share privately.

    #1045718
    Jason

    Hi,
    Thanks I tried span but it didn’t work. I have managed to get them side by side using flex box, however they appear bunched up on a box on the left. My goal is to essentially have them evenly spaced across the full width (as button or simple fa icon) with the hamburger menu even in the 5th space ie 5 icons evenly spaced across the screen. Essentially this is what I’m trying to create (https://www.bnecreative.com/products/navbar/). I’m not sure if this is doable.
    I’m assuming there is no easy way to integrate the hamburger menu as it stands with my html (ie create a fixed bar with a link that calls the off-canvas menu) with recreating the code from scratch (out of my league)?

    #1046033
    David
    Staff
    Customer Support

    Try replacing your CSS with:

    .inside-fixed-mobile-footer {
        flex: 1 0 80%;
        align-items: center;
        display: flex;
    }
    
    .inside-fixed-mobile-footer div {
        flex: 1 0 25%;
        display: flex;
        justify-content: center;
    }
    
    #mobile-header .mobile-bar-items {
        flex: 1 0 20%;
    }
    #1046079
    Jason

    Hi thanks! You have sent me a whole lot closer! I made a few other changes to get it close to my desired outcome.
    I’m stuck on having the menu icon out of alignment with the rest, can you help me balance that out at all?

    #1046269
    Jason

    Changed to this which fixed the spacing

    #mobile-header .menu-toggle {
    flex: 1 0 20%;
    }

    I am struggling to get the bars to change color when hovering over menu-toggle (only works over menu bars) – any ideas?

    #1046470
    David
    Staff
    Customer Support

    Are hover colors important considering hover doesn’t work on mobile devices ?

    #1047305
    Jason

    Hi David,
    No not essential, but nice – especially in use cases where people use browsers minimised at side of screen. I’m not going to lose sleep over it, but if there was an easy way to make them all consistent then I’d take it! I appreciate all your help

    #1047550
    David
    Staff
    Customer Support

    Aah ok – sorry i didn’t spot the issue first of all – give this a shot:

    .menu-toggle:hover .gp-icon svg {
        fill: #fff;
    }
    #1047621
    Jason

    Works perfectly!
    Now the last bit to push my luck which you can see on the test page. I have added the word ‘menu’ using
    .menu-toggle::after {
    content: “\A menu”;}
    But am struggling to get it to display under the 3 bars
    Don’t suppose you have magic up your sleeve for that?!

    #1047950
    David
    Staff
    Customer Support

    give your CSS a display: block; property.

    #1048419
    Jason

    Thanks! That would have been obvious had I been smarter!
    Trying to get the space between those bars and text to match the space between other icons and text is a different challenge now! Whenever I increase the space using padding to the ::after element it creates a larger container and pushes the icon higher out of alignment with the rest. Am I targetting the wrong thing?

    #1048609
    David
    Staff
    Customer Support

    Try editing this CSS to include the two properties i have included:

    .menu-toggle::after {
        display: block;
        content: "menu";
        color: #ff7518;
        font-size: 0.5em;
        /* Add the following properties */
        line-height: 1;
        padding-top: 0.8em;
    }
    #1049291
    Jason

    Thanks David, your support and suggestions have been spot on and educational. I have managed to create what I set out to achieve!

    #1049503
    David
    Staff
    Customer Support

    Happy to hear that 🙂

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