Menu not Properly Responsive

[santosfel5]

When my top navigation is collapsed, it breaks below the logo like this.

I want to know how can I create a media query to either collapse it to a hamburger menu or make the font smaller for 13.5 inch screens?

[paul.r]

Hi,

This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space. The following should be considered in these situations:

Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.

Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.

Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.

Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.

Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible

Thanks

[santosfel5]

Thank you for your assistance. Would you happen to know what code I would need to switch to the hamburger menu at certain device widths?

[Prasant]

Hello @santosfel5,

Thanks for updating the thread.

Actually it will fall outside the scope of support can offer and more so it’s something that we don’t really recommend doing. Changing navigation and header behaviour can have negative impact of the layout. Even if you want to make the changes, I suggest you to getting in touch with a developer.

Thanks for understanding.

[santosfel5]

I’ve asked this question before with previous versions of X theme and received the code on this forum. Is this no longer support you offer?

[paul.r]

Hi,

We stop providing it as it might not work on future updates.

You can try the following but please note that we cannot provide continued support with regards to this custom CSS.

@media (max-width: 1200px) {
.masthead-stacked .x-btn-navbar {
    display: inline-block;
}

.x-nav-wrap.desktop {
    display: none;
}

.x-nav-wrap.mobile {
    display:block;
}

.x-nav-wrap.mobile.x-collapsed {
    display: none;
}
}

Change 1200px to adjust when you would like the mobile button will appear.

Thank you for understanding.