Support » Theme: Neve » Change when navigation collapses to mobile navigation

  • brianjw18

    (@brianjw18)


    My menu has a lot of menu items and as a result it doesn’t look properly on certain screen sizes.

    Currently, Neve collapses the menu into mobile formatting at or below 959px, however due to the number of menu items in my navigation, I need it to collapse into the mobile format with the hamburger icon when the screen size is LESS than 1200px. So every screen size at or below 1199px would show the mobile menu.

    Please let me know how I can achieve this. We are using a child theme on top of Neve. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Silviu-Alex Dinu

    (@silviu0themeisle)

    Hello there,

    Thanks for being part of our community.

    Could you please also provide a link to your website so I can have a look?

    If you are building locally, please send us some screenshots so I can attempt to replicate a similar situation on my end and try to find a solution.

    Thank you.

    brianjw18

    (@brianjw18)

    Hi @silviu0themeisle,

    Our website is https://www.vanguardattorneys.com/devsite/. I am working to transition this to https://www.vanguardattorneys.com. So whichever link you see Neve running on is the right one.

    I have temporarily added the following code the Neve Child style.css:

    @media only screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }}

    This has made it look good on my resolution, but I’m looking for something to force it into the mobile-mode for anything less.

    Thanks!

    brianjw18

    (@brianjw18)

    Proper link is now https://www.vanguardattorneys.com. I migrated from devsite.

    Silviu-Alex Dinu

    (@silviu0themeisle)

    Hello @brianjw18,

    Thank you for providing additional details about your query.

    The 959px threshold was made to cover the majority of devices that people usually use to access websites with. Unfortunately, this is how the theme was designed to work and changing this particular feature would require multiple code changes which our support services do not cover.

    However, I would like to thank you for your suggestion. I will forward this to our developers as a feature request.

    Please let us know if there is anything else we can help you with.

    brianjw18

    (@brianjw18)

    @silviu0themeisle,

    I appreciate your response.

    I have created a work-around that ensures everything fits on the same line. I did this through trial and error through Google Developer console. I thought I’d share it here as a simple solution for other people trying to do this.

    1. As I mentioned in prior post, I have added this to my child theme style.css:

    @media only screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }}

    2. I have a custom call to action code that I needed to reduce the size of slightly. I won’t include the code since this will be different for everyone.

    3. Reduce the size of the logo and remove padding on the left and right to create more space for the menu:

    @media only screen and (min-width: 960px) and (max-width: 1200px) {
    .nv-nav-header {
        max-width: 90px;
    }
    .col-md-12.nv-nav-wrap.nav-left {
        padding-left: 0;
        padding-right: 0;
    }
    }

    4. Remove the search icon for that extremely small window of screen sizes where the menu doesn’t have enough space:

    @media only screen and (min-width: 960px) and (max-width: 961px) {
    li.menu-item-nav-search {
        display: none !important;
    }
    }

    Hope this helps. You will, I’m sure, have to tweak this based on your own menu items and configurations, but this worked for us. Thanks!

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