Archived topic

Mobile header menu spacing / rearranging

7 replies · Started by James on July 5, 2019

Viewing posts 1–8 of 8

July 5, 2019 at 9:54 am #949961

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.

July 5, 2019 at 5:14 pm #950183

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 :)

July 6, 2019 at 2:13 am #950311

Hi Tom,

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

Thanks

July 6, 2019 at 8:51 am #950560

I edited Tom's CSS a bit.

Can you give it another shot?

Let me know :)

July 13, 2019 at 6:33 am #956698

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.

July 13, 2019 at 10:13 pm #957198

What if you add this?:

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

July 14, 2019 at 12:06 pm #957717

That worked! Thanks

July 14, 2019 at 4:45 pm #957871

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.