[Resolved] Mobile Primary Nav Menu Items Dynamic Sizing

Home Forums Support [Resolved] Mobile Primary Nav Menu Items Dynamic Sizing

Home Forums Support Mobile Primary Nav Menu Items Dynamic Sizing

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by Fernando.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2176949
    Anthany

    Hi Generatepress Support,

    I am looking to make my primary navigation on mobile look like this: https://snipboard.io/gAoSY5.jpg . However I am having trouble making the menu items adjust their size and width dynamically to the size of devices. For example, the menu looks good on devices that are around 401px, but looks bad on devices any larger than 420px because the menu items don’t adjust to the size of the device as shown: https://snipboard.io/vjgr3Q.jpg . Do you guys have any idea how I can make the menu items dynamically adjust depending on device size so they always fit full width?

    Website URL: scuphed.com

    Kind regards, Anthany

    #2176975
    Fernando
    Customer Support

    Hi Anthany,

    This is what I’m seeing from my end from the link you sent: https://share.getcloudapp.com/z8uLrP8x

    To confirm, is this the correct link and are you wanting these menu items inline for all views as it is in the screenshots you shared?

    If the link is correct, and I’m seeing something different, may you kindly clear any caching mechanisms set in your website?

    Kindly let us know. Hope to hear from you soon. 🙂

    #2178210
    Anthany

    Hi Fernando,

    My sincere apologies, I had a code snippet that made the primary navigation for logged-out users different than the primary navigation for logged-in users, and the CSS I used to make the navigation look like it did in my screenshots only applied to the logged-in navigation (this completely slipped my mind, my apologies). I have disabled this code snippet so the navigation should now look as it does in the screenshots I sent.

    Kind regards, Anthany

    #2178240
    Fernando
    Customer Support

    I see.

    Here is a CSS code you may try:

    @media (min-width: 420px) and (max-width: 768px) {
        /* CSS in here for tablet only */
        div#primary-menu ul#menu-logged-in-primary-nav .menu-item a {
        font-size: 16px !important;
        }
    }

    This code makes that font-size of the menu items 16px from 420px to 768px wide.

    If you wish to create more media queries to make the font-size more responsive, you’ll just need to make more specific queries. For instance, instead of the CSS above, try this:

    @media (min-width: 420px) and (max-width: 602px) {
        /* CSS in here for tablet only */
        div#primary-menu ul#menu-logged-in-primary-nav .menu-item a {
        font-size: 12px !important;
        }
    }
    
    @media (min-width: 603px) and (max-width: 768px) {
        /* CSS in here for tablet only */
        div#primary-menu ul#menu-logged-in-primary-nav .menu-item a {
        font-size: 16px !important;
        }
    }

    Hope this clarifies. 🙂

    #2181519
    Anthany

    Hi Fernando,

    Thank you so much for your solution, that works perfectly!

    Kind regards, Anthany

    #2181576
    Fernando
    Customer Support

    You’re welcome Anthany! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

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