Mobile Menu Change by Viewport Change

Support
#1

Due to the amount of pages in my primary menu I need to make the mobile menu (hamburger menu) appear earlier than its activating. I tried to do this but didn’t have any success. Do you know any CSS that could specify the screensize or viewport when the mobile menu is called or activated?

Thank You

#2

Hello Bryce,

Thanks for writing in!

It’s not a recommended to change the viewport sizes as more often than not it leads to more complications and issues. I see that you have Pro and X Theme license. Can you let us know the Theme that’s being used on the website?

If it’s Pro Theme then I would suggest you to consider Navigation Collapsed, Navigation Dropdown, Navigation Layered or Navigation Model element, depending on the requirement.

In case you are using X Theme, probably you can adjust the font size through CSS. Please let us know the the theme that website is using and we will guide you accordingly.

However, if you would like to change the viewport size, please refer following threads. Please note that in case any issues come up it will fall outside the scope of support we can offer:

Thanks.

#3

Thank you for the info. I’m currently using the x theme for this license. A rough version of what I’m working with can be seen at: http://www.rocketboysolutions.com/Harrison/

I’m going to try to reduce the navigation text size via CSS per the screen size. I’ve been trying a lot of combinations with text similar to the following but haven’t had any success. Which CSS navigation classes or IDs would be best to use when resizing the navigation per screen size?

@media (max-width: 1200px) {
.x-nav-wrap #menu-main-menu {font-size:10px; }
}

*have the max-width size larger than needed to be sure I see the changes.

Thank You

#4

Hey Bryce,

Do you mean you want the mobile menu show sooner? If so, please add this code in X > Theme Options > CSS:

@media (min-width: 1200px) {

    .x-nav-wrap.desktop {
        display: none
    }
  
    .x-nav-wrap.mobile {
        display: block
    }
  
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
  
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
  
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
  
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }

}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

1 Like
#5

That’s what I asked originally and was looking for other alternatives since this could cause future problems. What specific CSS selectors should I use to change the navigation font size to fit the viewport?

Thank You

#6

Hey Bryce,

It should be .x-navbar .x-nav-wrap .x-nav > li > a

Hope this helps.

1 Like
#7

That’s it, thank you for your help!!

Can future updates cause any issues in regards to changing the nav font size dependent upon viewport?

#8

Hi Bryce,

I have added this request in our feature request list so that it will be considered in the future development.

Thank you.

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.