Increase tablet breakpoint resolution

kpsathas replied

4 years ago

Customer Reply

It works fine now.

Thanks once more for the great support!

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-vernav-toggle svg {
  position: absolute;
  top: 5px;
  left: 5px;
  fill: #fff;
}

Regards,
PenciDesign.

kpsathas replied

4 years ago

Customer Reply

Hi,

I have just realized that the white hamburger menu icon (svg) disappeared from the mobile/tablet vertical navigation!

In the meantime, I didn't make any changes to the site. So, I thing that there must be something with the theme version update or something.

https://kpsathas.gr

Please advise,

Thank you

kpsathas replied

4 years ago

Customer Reply

Thank you very much for your time and your great help.

Everything now is working fine!

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've edited your site CSS on Appearance → Customize → Custom CSS.

Please check.

Regards,
PenciDesign.

kpsathas replied

4 years ago

Customer Reply

Hi,

You are right, I had to remove the css code because I was trying to find a solution in the meanwhile. Now, I have added the css code according to your instructions.

Please check and let me know.

Thanks

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've checked your site. The code I've sent to you is still not included on your site.

Please make sure you've added it on Appearance → Customize → Custom CSS then clear all the browser cache & check again.

Regards,
PenciDesign.

kpsathas replied

4 years ago

Customer Reply

Sorry to say that but still doesn't work...

The vertical navigation menu still disappears at 960px and not at 1366px.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Following your request, please replace the previous code with this CSS:

@media only screen and (max-width: 1366px) {
    .penci-vernav-enable.penci-vernav-poleft .penci-menu-hbg {
        transform: translateX(-360px);
        -webkit-transform: translateX(-360px);
        -moz-transform: translateX(-360px);
    }
    .penci-vernav-toggle {
        display: block;
    }
    .penci-vernav-enable.penci-vernav-poleft .wrapper-boxed {
        padding-left: 0;
    }
}
@media only screen and (min-width: 1367px) {
    .penci-vernav-enable.penci-vernav-poleft .penci-menu-hbg {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
    }
}

Regards,
PenciDesign.

kpsathas replied

4 years ago

Customer Reply

Thank you very much for your quick reply!
Unfortunately it doesn't seem to work...

PenciDesign replied

4 years ago

Staff Reply

Hi,

You can try adding more of this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 1366px){
.penci-vernav-toggle {
    display: inline-block;
}
}
@media only screen and (min-width: 1367px){
.penci-vernav-enable .penci-menu-hbg {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
}
}

Best Regards,

PenciDesign

kpsathas replied

4 years ago

Customer Reply

I just found out that the breakpoints are working fine and the problem is related to the vertical navigation menu. So, the main request is to change the breakpoints for the vertical navigation menu appearance. I would like the vertical navigation menu change to mobile hamburger menu for resolutions smaller than 1366px.

Thank you in advance!

kpsathas started the conversation

4 years ago

Conversation Start

I'm using vertical navigation for my website and I would like to change the breakpoints of the theme. Unfortunately, when I'm trying to change the breakpoints via Elementor site settings nothing is changing. As far as I understand at this point the tablet breakpoint is 960px but I would like to increase it to 1366px so I can have "tablet" mode on resolutions smaller than 1366px.