[Resolved] Mobile header menu spacing / rearranging

Home Forums Support [Resolved] Mobile header menu spacing / rearranging

Home Forums Support Mobile header menu spacing / rearranging

  • This topic has 7 replies, 3 voices, and was last updated 5 years ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #949961
    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.

    #950183
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #950311
    James

    Hi Tom,

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

    Thanks

    #950560
    Leo
    Staff
    Customer Support

    I edited Tom’s CSS a bit.

    Can you give it another shot?

    Let me know πŸ™‚

    #956698
    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.

    #957198
    Tom
    Lead Developer
    Lead Developer

    What if you add this?:

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

    That worked! Thanks

    #957871
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

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