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

Question

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 ?

score 0 · Answer 1 · answered Apr 06 '16 at 19:46

0

Yes, you have to overwrite a core css file specific for the dockbar, this:

/portal-master/portal-web/docroot/html/themes/_styled/css/dockbar.css

Look at row number 755.

This is a not happy choice from liferay frontend developers. In some case, like that one, there are specific css files you cannot overwrite only by custom theme.

With an hook plugin you can overwrite that file.

bye

answered Apr 06 '16 at 19:46

Daniele Baggio

2,157
1
14
21

I understand that I need edit that file. But what exact changes needs to be done? – Kartik Rao Apr 11 '16 at 10:45

Kartik Rao · Accepted Answer · 2016-04-18T11:41:56.373

0

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

edited Apr 18 '16 at 11:41

answered Apr 11 '16 at 10:47

Kartik Rao

23
4

Are you doing this using an hook plugin? Which way do you use to change the code? – Daniele Baggio Apr 11 '16 at 10:55
I copy the file inside diff folder. Deploy the theme code. I can see that code is changed. But, I don't see the output. – Kartik Rao Apr 11 '16 at 11:44

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

2 Answers2