how to change media-query in elemental-theme, using version 5.7.5.2 ?

Permalink October 09, 2015 at 10:37 AM

I have a particular layout where I want the .responsive-menu-launch button on the top right corner to show at 992 pixels, instead of the default of 768px.

In navigation.less I changed:

@media all and (max-width: 992px) {
  .ccm-responsive-menu-launch {
    display: block;
  }
  .ccm-responsive-navigation.original {
    display: none;
  }
  header {
    .ccm-search-block-form {
      margin-top: 20px;
    }
  }
}
@media all and (min-width: 992px) and (max-width: 1824px) {
  .ccm-responsive-overlay {

Viewing 15 lines of 18 lines. View entire code block.

@media all and (max-width: 992px) {
 
  .ccm-responsive-menu-launch {
    display: block;
  }
 
  .ccm-responsive-navigation.original {
    display: none;
  }
 
  header {
    .ccm-search-block-form {
      margin-top: 20px;
    }
  }
}
@media all and (min-width: 992px) and (max-width: 1824px) {
  .ccm-responsive-overlay {
    display: none !important;
  }
}

.

In bootstrap variables i changed:

@grid-float-breakpoint:     @screen-md-min;

It doesn't show the desired results, - I guess I'm missing something.

Is there a way to do this easily?
I could not find any documentation on concrete5.

thanks for help.
kfog

MrKDilkington replied on Oct 9, 2015 at 7:26 pm Permalink Best Answer Reply

Hi kfog,

In navigation.less, change @screen-xs-max to @screen-sm-max.

@media all and (max-width: @screen-sm-max) {
  .ccm-responsive-menu-launch {
    display: block;
  }
  .ccm-responsive-navigation.original {
    display: none;
  }
  header {
    .ccm-search-block-form {
      margin-top: 20px;
    }
  }
}
@media all and (min-width: @screen-sm-max) {
  .ccm-responsive-overlay {

Viewing 15 lines of 18 lines. View entire code block.

 
@media all and (max-width: @screen-sm-max) {
 
  .ccm-responsive-menu-launch {
    display: block;
  }
 
  .ccm-responsive-navigation.original {
    display: none;
  }
 
  header {
    .ccm-search-block-form {
      margin-top: 20px;
    }
  }
 
 
 
}
 
@media all and (min-width: @screen-sm-max) {
  .ccm-responsive-overlay {
    display: none !important;
  }
}