improve responsive CSS

Looking for CSS to correct the main menu on how it loads in screensize starting from tablet view. ie 768px to 1184px screensize.

Would like to make the menu appear in a single line, as noticed in other screensize.

  • Nahid
    • Tech Support

    Hey eTech !
    Hope you are having a great day!

    Please try adding the following custom CSS in order to make the menu inline in the mentioned screen sizes:

    @media only screen and (max-width: 1165px) and (min-width: 768px) {
        .woocommerce-active #masthead.site-header .secondary-navigation {
            width: auto;
        }
    }
    
    @media only screen and (max-width: 1023px) and (min-width: 768px) {
        .storefront-primary-navigation {
            width: 55%;
        }
    
        .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
            margin-right: 0;
        }
    }
    
    @media only screen and (max-width: 815px) and (min-width: 768px) {
        .woocommerce-active #masthead.site-header .main-navigation {
            position: relative;
            top: 20px;
        }
    }

    You can add the custom CSS in your WordPress Dashboard->Appearance->Customize->Additional CSS, your theme's (most preferably child theme's) stylesheet or a custom CSS plugin.

    Hope this helps. Please let us know if this works for you. We'll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

  • Dimitris
    • Support Star

    Hello there eTech,

    hope you're doing good today and don't mind me chip in here! :slight_smile:

    I gave this another look, could you please try to add the following CSS and check how's that going?

    @media screen and (min-width: 768px) and (max-width: 1023px) {
      #menu-secondary-menu {
        min-width: 247px;
        margin-top: 4px;
      }
    }

    Warm regards,
    Dimitris

  • Dimitris
    • Support Star

    Hey there!

    It seems that my previous workaround is working good only for not logged-in users.

    I went ahead and replaced it with some more rules, you can see them on the very bottom of your custom CSS, wrapped inside some comments like:

    /* WPMUDEV support - Dimitris - start */
    
    /* WPMUDEV support - Dimitris - end */

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.