Liferay: How to collapse dockbar for screen size less than 768px(mobile) instead of default 979px(tablet)?

I am using the default dockbar which comes with Liferay. Currently, the dockbar/navbar collapses when screen width is less than 979px. I want the dockbar/navbar to collapse on screen sizes less than 768px. I made changes in _variables.scss file as below:

$navbarCollapseWidth: 768px !default;
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;

Copied this file inside diff folder. Deployed the code. But, still the dockbar collapses on screen size less than 979px.

Am I supposed to make changes in any other files ?

Included below code inside custom.css and its working for me.

@media (min-width:768px) and (max-width:979px)
{
    #_145_dockbar
    {
        display:none;
    }
    .aui #navigation
    {
        display:block;
    }
    .aui .nav-collapse, .aui .nav-collapse.collapse
    {
        overflow:visible;
    }
    .aui .nav-collapse .nav>li
    {
        float:left;
    }
    .aui .portlet-dockbar
    {
        width:auto;
    }
}