Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2905904
Increase tablet breakpoint resolution
Closed

Comments

  • kpsathas started the conversation
    October 30, 2021 at 12:03pm

    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.

  • kpsathas replied
    October 30, 2021 at 12:16pm

    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!

  •  2,699
    PenciDesign replied
    October 30, 2021 at 12:27pm

    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
    October 30, 2021 at 12:37pm

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

  •  2,492
    PenciDesign replied
    October 30, 2021 at 3:28pm

    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
    October 30, 2021 at 4:01pm

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

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

  •  2,492
    PenciDesign replied
    October 31, 2021 at 3:36am

    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
    October 31, 2021 at 10:49am

    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 replied privately
  •   kpsathas replied privately
  •   PenciDesign replied privately
  •   kpsathas replied privately
  •  2,492
    PenciDesign replied
    November 2, 2021 at 12:25am

    Hi,

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

    Please check.

    Regards,
    PenciDesign.


  • kpsathas replied
    November 2, 2021 at 2:48pm

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

    Everything now is working fine!

  • kpsathas replied
    March 12, 2022 at 8:05pm

    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

  •  2,492
    PenciDesign replied
    March 13, 2022 at 1:48am

    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
    March 13, 2022 at 5:08pm

    It works fine now.

    Thanks once more for the great support!