[Support request] Menu arrows and mobile spacing on archive pages

Home Forums Support Menu arrows and mobile spacing on archive pages

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1381347
    Joy

    Hi Team GP,
    Hope all is well.

    Issue 1:
    I’m looking to remove the little arrows in the navigation menu. I found this code in the support forum which works:


    @media
    (min-width: 769px) {
    .menu-item-has-children .dropdown-menu-toggle {
    display: none;
    }
    }

    But, it seems to make the space between menu items inconsistent. For example, the space between our first menu item (Lifestyle) and the second (podcast) is much wider than the difference between (podcast) and (about).

    Any ideas on how to fix this? I took out the code for now given it looks pretty weird but let me know if you need me to add it back so you can see it better.

    Issue 2:
    I’m finding that the archive pages on my site (that have a list of all the posts) are looking nicely centered in the mobile view using Chrome’s developer tools but when I look at it on my actual phone, it’s off center. Any idea why this is happening?

    Many thanks,
    Joy

    #1381350
    Joy

    Ah sorry, I see David already replied to my other post re issue 1 (I couldn’t figure out how to see if anyone had replied, apologies) so will try that now. So just issue 2 per the above is where I need help many thanks!

    #1381483
    David
    Staff
    Customer Support

    Hi there,

    1. glad to hear you found the CSS.
    I link the topic here for reference:
    https://generatepress.com/forums/topic/remove-dropdown-arrows-from-navigation/#post-1375618

    2. Looks like some of the CSS is getting scrambled by the cache plugin. Add this CSS to fix that:

    @media (max-width: 768px) {
        .generate-columns {
            padding-left: 0 !important;
        }
    }
    #1428596
    Joy

    Thanks so much David,

    #2 worked for the main archive pages however on each post, we have a “related articles” section that uses the “latest posts” block. And these are still looking very off center. I imagine they use the same code as the archive pages? Any idea how to fix this?

    Many thanks,
    Joy

    #1428831
    David
    Staff
    Customer Support

    Did you resolve the issue with Related Posts ? It looks fine to me.

    #1431428
    Joy

    Hi David,

    No unfortuntely not, it still looks skew on my mobile and on mobile preview. Here’s an image of what it looks like to me. Looks the same on both our phones unfortunately.

    Many thanks in advance for any thoughts!
    Joy

    #1431671
    David
    Staff
    Customer Support

    You can remove the right margin from the Related Posts lists on mobile with this CSS:

    @media(max-width: 768px) {
        .wp-block-latest-posts.is-grid li {
            margin-right: 0;
        }
    }
    #1432452
    Joy

    That’s it! All sorted, thanks heaps!

    #1432734
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.