Joomla Templates Club 406,261 posts

[skelp Friend skelpJoin date: January 2016Posts: 42Downloads:23Uploads:1]

#956060

Hi,

I’d like to change the point where the horizontal dropdown menu (for wide screens) changes into a collapsable menu for mobile devices. Here is the link to the website. I want the breakpoint at approximately 1200 pixels (instead of 768px), otherwise you see 3 rows of menu items between 1200 and 768 pixels, which I don’t like (2 rows is acceptable). Can I do this with custom css?

Liesbeth

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#956365

Hi @skelp,

This need to be changed via LESS file: ROOT/templates/ja_playstore/less/variables.less Look for this Media Queries Breakpoints:

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

and you can change to your desired value.

Note that if your site is not running with Development Mode (see in template manager), you will need to compile less to css first (REMEMBER to backup all css files)

[skelp Friend skelpJoin date: January 2016Posts: 42Downloads:23Uploads:1]

#966421

Hi, thank you I found the file, but could you exactly tell me what I should do?

I am not running developpment mode and the file is called variables.less

For testig I changed all the values in the file above to 480px, but nothing happens to my breakpoint in the menu. Also nothing happens when I change it to 1200 px.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#966622

There was mistake when I copy the code above, it lacks the code:

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         32px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-lg;

Just below above code and you can change ‘grid-float-breakpoint’ variable to ‘screen-lg’ as above.

Then open the file: ROOT/templates/ja_playstore/css/custom.css (create this file if it doesn’t exist) and add this css rule:

.navbar .navbar-header .off-canvas-toggle, .off-canvas-effect-4.off-canvas-open .off-canvas-effect-4.t3-off-canvas {
    display: block !important;
}

[Author]

Posts