[mainframe]

I am wondering if there is a CSS command (that I can’t find) that I can edit. The breakpoint before the Lafka theme drops the main bar and switches to mobile is WAY too sensitive. The main bar (yellow bar in your main demo) drops off if the user does not maximize their windows on their desktops, so about 90% of my viewers see the mobile header instead. This is very frustrating…

Can we either (1) adjust the width of that yellow bar, or (2) adjust the responsive breakpoint to a much smaller number to only become so dramatically responsive when its closer to 968px? Or (3) both?

Thanks!

[Althemist]

It can be done, but highly not recommended, as there are many other functionalities tied to this (e.g. desktop and mobile account menu switch etc.). Also, all resolutions and screen sizes bellow 1280px are nowadays considered “mobile/tablet”.

In order to change the breakpoints, you’d need to use the child theme.

These are the styles you need to change:

@media only screen and (max-width: 1279px) {
    #main-menu, #main-menu #main_nav.menu, ul.lafka-top-menu, .video_controlls, .lafka-wishlist-counter, #lafka-account-holder {
        display: none !important;
    }
}

However, as I already explained, this would be entirely on your own responsibility, as it may lead to other layout/styling problems, so probably more styles may need to be adapted.

Hope this helps.

Regards,
Dimitar

[mainframe]

Thank you! I understand your point completely. However, I am not using the majority of the theme features and it may not really change for the limited pages that I am using; the theme layout is perfect for my business.

I am using the child theme and wanted to see how much it effected my layout by adjusting this setting, however I have increased the 1279px value and decreased it without seeing any noticeable difference. Am I placing this in the child styles.css or do I need to mimic the lafka-responsive.css file? I feel that I’ve tried both and do not notice anything different. On my desktop/laptop screen, reducing the viewing window only slightly from the edges of the screen immediately drops the top left/right menu along with the main menubar and the mobile menu “hamburger” is loaded. I’m confused why this is so strict, as I have tested other templates and their breakpoints are used more when I reduce the width of the desktop/laptop viewing window (Macbook Pro) to at least 3/4 width, a more understandable margin size (I understand the width is dependent on many other factors and sizes, just using 3/4 as a general reference against other websites).

Not meaning to question your design, it’s wonderful! Am I loading this correct just to do some personal testing?

[Althemist]

The problem is that the lafka-responsive.css is loaded after the child-theme’s style.css

I’d suggest using a top-level selector like the body in order to make it work:

@media only screen and (max-width: 1279px) {
    body #main-menu, body #main-menu #main_nav.menu, body ul.lafka-top-menu, body .lafka-wishlist-counter, body #lafka-account-holder {
        display: none !important;
    }
}

Also, don’t forget you’d first need to SHOW the hidden by original CSS elements. So, the final CSS should be something like this:

@media only screen and (min-width: 980px) {
    body #main-menu, body #main-menu #main_nav.menu, body ul.lafka-top-menu, body .lafka-wishlist-counter, body #lafka-account-holder {
        display: block !important;
    }
}
@media only screen and (max-width: 979px) {
    body #main-menu, body #main-menu #main_nav.menu, body ul.lafka-top-menu, body .lafka-wishlist-counter, body #lafka-account-holder {
        display: none !important;
    }
    a.mob-menu-toggle {
        display: table;
    }
}

Hope this helps.

Regards,
Dimitar

[Author]

Posts