Return to previous page

Menu items under 1366×768 screens - by istvan

This topic has 4 replies, 2 voices, and was last updated 4 years, 5 months ago ago by Rose Tyler

istvan

Participant

November 8, 2019 at 08:22

Hi Support Team,

I have a site https://apeker.hu with left side menu. When the page is opened under 1366×768 not all menu items are visible. Could you help please with a code to switch to mobile menu under it it’s opened under this screen size?

Thank you,
Istvan

Copied Theme version: 6.0.1 WooCommerce version: 5.2.4

3 Answers

Rose Tyler

Support staff

November 8, 2019 at 17:21

Hello,

Mobile menu starts from 992px. If you want to change this breakpoint it requires a lot of additional style customization. But you may add this code in custom CSS:

.header-vertical-enable .page-wrapper .header-type-vertical2 {
    max-height: 100vh;
    overflow: auto;
}

it will add scroll on the left side menu.

Regards

Copied

istvan

Participant

November 12, 2019 at 13:57

Hi,

Thank you, the top level menu now is fine. But after this the submenus are not showing up when I hover with the cursor on a main menu item. Could you advise something for this?

Best regards,
Istvan

Copied

Rose Tyler

Support staff

November 12, 2019 at 14:30

Hello,

In this case, replace the previous code by this one:

@media only screen and (max-width: 1500px) and (min-width: 992px){ 
    .header-vertical-enable .page-wrapper .header-type-vertical2 .container .navbar {
        padding-top: 0px;
    }
    .header-vertical-enable .page-wrapper .header-type-vertical2 .container .header-logo {
        margin-bottom: 15px;
        margin-top: 10px;
    }
    .header-vertical-enable .page-wrapper .header-type-vertical2 .container .menu {
        padding-top: 0px;
    }
    .header-vertical-enable .page-wrapper .header-type-vertical2 .container .menu > li > a {
        padding: 7px 30px;
        font-size: 14px;
    }
    .header-vertical-enable .page-wrapper .header-type-vertical2 .shopping-container, .header-vertical-enable .page-wrapper .header-type-vertical2 .header-search {
        padding: 5px 0;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 992px){ 
    .header-vertical-enable .page-wrapper .header-type-vertical2 .shopping-container .shop-text .total .amount {
        margin-left: 0px;
    }
    .header-vertical-enable .page-wrapper .header-type-vertical2 .shopping-container .shop-text {
        padding-top: 10px;
        float: right;
    }
    .header-vertical-enable .page-wrapper .header-type-vertical2 .shopping-container .shopping-cart-widget .cart-summ .cart-bag {
        display: inline-block;
        padding-top: 0 !important;
    }
}

Regards

Copied