[Resolved] Problems with Mobile Navigation Menu

Home Forums Support Problems with Mobile Navigation Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1320356
    Kaelum

    Hi there,

    The primary navigation bar of my website is built on a slim single-row bar with the various categories displayed (as you can tell if you access the desktop version).

    I want the same look to appear in the mobile version (where the headers appear on one layer) and have tried to decrease the text size to ensure this happens.

    However whenever I change the mobile version of the text on generate press (currently set to 22 on desktop, 18 on mobile) the mobile text remains exactly the same as desktop, and its forcing my navigation bar to display across 2 rows (as you’ll see if you access the site via mobile).

    I’ve tried replicating this by using Chrome’s built-in mobile viewer (not just my own mobile) and the same thing shows.

    I have tried removing cache both from wordpress, my hosting service and originally tried this about a week ago (many other changes have worked fine on the site since then).

    Any ideas please?

    Thanks

    #1320447
    David
    Staff
    Customer Support

    Hi there,

    the mobile menu font size only applies when the Mobile Menu is displayed.
    Try adding this CSS:

    @media (max-width: 768px) {
        .main-navigation a {
            font-size: 16px;
        }
    }
    #1320536
    Kaelum

    Thanks David, that seems to have worked a treat 🙂

    Just a question on the CSS, does that mean if a screen has less than 768 pixels it then displays the smaller text size?

    Only thing I don’t like it if that then affects some tablet users (where I expect the small font to look bad in comparison to the main font size on a tablet) – Is there any way around this if I’ve got it right?

    I’ll take the current approach as a solution if there isn’t an easy way, thanks.

    #1320553
    David
    Staff
    Customer Support

    Thats correct. You can change max-width: 768px to max-width: 420px then it will apply to Plus Size Mobiles and smaller

    #1320586
    Kaelum

    Perfect, thanks again 🙂

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