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 #3000829
Custom Break Points
Closed

Comments

  • annaknt145 started the conversation
    March 12, 2022 at 2:52pm

    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/

  •  2,492
    PenciDesign replied
    March 12, 2022 at 3:37pm

    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 replied
    March 12, 2022 at 4:03pm

    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.

  •  2,492
    PenciDesign replied
    March 12, 2022 at 4:10pm

    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
    March 12, 2022 at 4:30pm

    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;
        }
    }

  •  2,492
    PenciDesign replied
    March 12, 2022 at 5:12pm

    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
    March 12, 2022 at 5:57pm

    That's great!

    Now everything is working fine.

    Thanks again for your help.