Custom Break Points | PenciDesign Support

annaknt145 replied

4 years ago

Customer Reply

That's great!

Now everything is working fine.

Thanks again for your help.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please modify the CSS code like this:

@media only screen and (min-width: 961x) and (max-width: 1440px) {
    #navigation .menu {
        display: none !important;
    }
    #navigation .button-menu-mobile {
        display: block;
    }
}
@media only screen and (min-width: 961px) {
    #sidebar-nav {
        display: block;
    }
}
@media only screen and (min-width: 1440px) {
    #sidebar-nav {
        display: block;
    }
}

Regards,
PenciDesign.

annaknt145 replied

4 years ago

Customer Reply

Thank you for your quick reply!

Now the main menu disappears and hamburger button appears below the 1279px but when I press it the mobile menu is blank (like transparent).

This is how I configured the CSS code you sent me on your previous email:

@media only screen and (min-width: 960px) and (max-width: 1279px) {
    #navigation .menu {
        display: none !important;
    }
    #navigation .button-menu-mobile {
        display: block;
    }
}

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please add this CSS code to your site:

@media only screen and (min-width: 960px) and (max-width: 1440px) {
    #navigation .menu {
        display: none !important;
    }
    #navigation .button-menu-mobile {
        display: block;
    }
}

Regards,
PenciDesign.

annaknt145 replied

4 years ago

Customer Reply

As I mentioned in my previous message I have already tried to modify the CSS code before with no luck.

The goal is to activate the mobile menu (hamburger button) at 1279px and not at 960px.

Thank you.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please custom the CSS code like the below:

/* Large Desktop */
@media screen and (min-width: 1440px) {
    #navigation ul.menu > li, #navigation .menu > ul > li {
        margin-right: 30px;
    }
}
/* Tablet Horizontal */
@media screen and (min-width: 1241px) {
    #navigation ul.menu > li, #navigation .menu > ul > li {
        margin-right: 10px;
    }
}
/* Tablet Vertical */
@media screen and (min-width: 960px) and (max-width: 1240px) {
    #navigation ul.menu > li, #navigation .menu > ul > li {
        margin-right: 10px;
    }
}
/* Mobile */
@media screen and (max-width: 768px) {
    #navigation ul.menu > li, #navigation .menu > ul > li {
        margin-right: 5px;
    }
}

Regards,
PenciDesign.

annaknt145 started the conversation

4 years ago

Conversation Start

Hi,

I would like to change the breakpoints of my website because I use to many items in the main menu and on smaller screens the last item disappears before the mobile navigation.

So, I want to have the tablet mode activated at 1279px instead of 960px but I cannot find where can I change this setting.

I have already tried to change this with elementor builder with no luck. Also I've tried to do it via CSS using the post below but still nothing...

https://pencidesign.ticksy.com/ticket/2776697/