[Resolved] Horizontal stack elements in HTML mobile header

[Jason]

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

<i class=”fa”></i>
<i class=”fa”></i>
<i class=”fa”></i>
<i class=”fa”></i>

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

[David]

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.

[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)?

[David]

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

[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?

[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?

[David]

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

[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

[David]

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

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

[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?!

[David]

give your CSS a display: block; property.

[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?

[David]

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

[Jason]

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

[David]

Happy to hear that 🙂

[Author]

Posts