[Resolved] Mobile header menu spacing / rearranging

[James]

I managed to get some extra buttons/links in my mobile header but I am now having trouble getting them arranged properly.

I would like the search/magnifying button to be on the far right as it is normal if possible, and then the other two buttons/links should be evenly centered/spaced across the top, instead of aligned to the right.

https://snag.gy/nAszI3.jpg

I’ve used the following code to add things in if it matters:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-bar-items">
        <a href="../wtfff/random">Random</a>
        <a href="../wtfff/popular-facts/">Popular</a>
    </div>
<?php }

Thanks for your help.

[Tom]

Hi there,

You’ll want to change your code to this:

add_action( 'generate_inside_mobile_header', function() { 
    ?>
    <div class="mobile-bar-items custom-mobile-bar-items">
        <a href="../wtfff/random">Random</a>
        <a href="../wtfff/popular-facts/">Popular</a>
    </div>
    <?php 
} );

Then add this CSS:

.main-navigation .mobile-bar-items:not(.custom-mobile-bar-items) {
    order: 3;
}

Let me know 🙂

[James]

Hi Tom,

Thanks for the response, but after making the changes it doesn’t appear to have changed anything.

Thanks

[Leo]

I edited Tom’s CSS a bit.

Can you give it another shot?

Let me know 🙂

[James]

I gave it a try and that worked.

However, now when I use the search option/button, it doesn’t overlay the two new ‘buttons’/links that I’ve created like it does the logo and things.

[Tom]

What if you add this?:

.custom-mobile-bar-items {
    z-index: 0;
}

[James]

That worked! Thanks

[Tom]

You’re welcome 🙂

[Author]

Posts