Docs

[damador]

Hi – I am writing new thread because all other are “archived” – trying to control menu on arsenal.org.pl to properly collapse on a smaller screen – menu includes some items that on smaller screens collapse to 2 lines … – I can’t set font size to rem/em (only px in options) is there a way to make the menu more responsive on mid screens make font smaller – not break menu in 2 lines .. and then on smaller one collapse to burger

[John Ezra]

Hi there,

Thanks for writing in! Please provide us with more details on what you would like to achieve along with your URL. We’ll try a and see if we can help you with CSS. Thanks!

[damador]

On smaller resolution menu collapsed into 2 lines – i want to make it one to stay in one line until it collapse to burger

it split around width 1560 to 2 lines and 960 to burger. I need to achieve that menu stay still in one line @ 1560 to 960

[Paul R]

Hi,

It 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:

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 to save on a little real estate.

One other option is to make the mobile button appear earlier.

You can add this under Custom > CSS in the Customizer.

@media (max-width: 1575px) {
.x-navbar .x-nav-wrap.desktop {
   display:none;
}

.masthead-stacked .x-btn-navbar {
    display: inline-block;
}

.x-navbar .x-nav-wrap.mobile.in {
    display:block !important;
}
}

Hope that helps.

[damador]

@media (max-width: 1575px) {
.x-navbar .desktop .x-nav > li > a {
   font-size: 0.85vw;
    
}
  .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px;
    padding-right: 10px;
}
}

ty for hints – above code work perfectly – i prefer to use rem/em and font size based on vh/vw — this time vw work perfecly – fonts will degrade in size along with smaller padding and collapse properly to burger 🙂

[Christopher]

Thanks for sharing.

[Author]

Posts