Docs

[Jose Miguel]

Hi!
I have the menu on the left and when the screen size is smaller than 1280×1024 recent menu items are not seen, nor accepts the scroll in that part of the screen.
Need some CSS code to the menu size becomes automatic and all elements are seen in any type of display, I would not amount to change the size of the letters.
The web is http://www.lospatiosdebeatas.com
Thanks!

[Paul R]

Hi,

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

@media only screen 
  and (min-device-width: 979px) 
  and (max-width: 1280px) {
.x-navbar.x-navbar-fixed-left {
   overflow-y: scroll;
}
}

Hope that helps

[Jose Miguel]

This reply has been marked as private.

[Christopher]

Hi there,

Decreasing menu items padding will solve the issue.

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar-fixed-left .desktop .x-nav>li>a, .x-navbar-fixed-right .desktop .x-nav>li>a {
    padding: 8px 35px;
}
ul#menu-primary-menu {
    margin-top: 0;
}

Hope that helps.

[Jose Miguel]

Hi!
I have added the code you send me, but the menu is still cutted in screens that have small sizes.
I send 3 photos where you can see it!
Waiting for your answer.
Thanks

[Joao]

Hi There,

Your screenshots did no upload,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– Upload again your screenshots

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Jose Miguel]

This reply has been marked as private.

[Rupok]

Hi there,

You can enable scrolling by the below code so that on smaller height, the menu will be scrollable :

.x-nav-wrap.desktop {
  height: 100vh;
  overflow-y: scroll;
}

Hope this helps.

[Jose Miguel]

This reply has been marked as private.

[Christian]

Hey there,

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

Thanks!

[Jose Miguel]

Thanks so much! I will restructure the site, to put less items in the menu.
But in addition to that, I want to configure the web like a complet panel (not two different areas of menu and body) so when people scroll in it both parts (menu and body of the page) goes down. I think that will be possible, isn´t it? What I would like to have is the same design working with the scroll in block.
Hope you can help me.
Thanks again!

[Christian]

Regretfully, that is not possible due to the design and structure of the side navbar.

Thanks.

[Author]

Posts