NAVX

Breakpoint value

Changing the breakpoint value

The breakpoint value determines in which screen size the navigation goes from portrait mode to landscape mode. This value can be modified freely.

1 - Change via CSS or compile the SASS files with a new breakpoint value:

Open the navigation.css and change the value of all media queries:

/* Default value */
@media (min-width: 992px) {
...
}

/* Example with the value changed to 768px */
@media (min-width: 768px) {
...
}

Or:

Using your favorite application to compile SASS code, change the value of the variable named "$landscape-width" (in the file variables.scss):

// Screen size for media queries on landscape view
$landscape-width: 768px;

This will automatically update all media queries in the navigation.css. To compile the SASS files, you can use the application Scout-App.

2 - When initializing the navigation, use the new breakpoint value:

var navigation = new Navigation(document.getElementById("navigation"),{
    breakpoint: 768
});

Now your navigation will be in landscape mode if the screen has a size of 768px or more. See the list of tutorials for other ways to modify the navigation bar and add features.