JA Onepage - Where to set the Responsive Breakpoint?

galbur

Hi
I have a probem with my Horizontal Menu. With a szize around 994 px teh last menu item breaks to teh next line and is quite invisible. So i tried to find out whre to set the breakpoint to the Responsive Menu around this Size. But how adn where to do that?

Thank you
Best Regards
Christoph

saguaros

Hi Christoph,

I assume that you want to have breakpoint from 991px screen size, you will need to change in several files:

File: [your_site_root]/templates/ja_onepage/less/variables.less

Line 151, change to 991px:

// Navbar
// -------------------------
@navbarCollapseWidth:             991px;

File: [your_site_root]/templates/ja_onepage/less/navigation-responsive.less

Line 22, change to 991px:

// MOBILE
// -------------------------------------------------------------
@media ( max-width: 991px ) {

File: [your_site_root]/templates/ja_onepage/css/custom.css (Create this file if it doesn't exist) and add this css code:

@media (min-width: 767px) and (max-width: 991px) {
  #ja-header .span2 {
    width: auto;
    margin: auto;
  }

  #ja-header .span10 {
    float: left;
    width: 100%;
  }

  header#ja-header .logo-image, #ja-header .logo-text {
    width: auto;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    position: absolute;
    top: 24px;
    left: 100px;
    }
}

The above changes are applied to LESS files so if your site is not running with Development mode, you need to BACKUP your site and compile less to css to see the changes: https://www.t3-framework.org/documentation/bs3-configuration#compile-less

Regards