NAVX

The "landscape" class

Use the "landscape" class to modify the navigation

The navigation is a "mobile-first" component. This means that styles act first in portrait mode (small screens) and then in landscape mode (large screens). One way to add a style or behavior in landscape mode is by using the "landscape" class. This class is automatically added via javascript when the navigation is in landscape mode. The default class is "navigation-landscape" , but you can modify the class at navigation initialization:

// Changing the "navigation-landscape" to "landscape-view"
var navigation = new Navigation(document.getElementById("navigation"),{
    landscapeClass: "landscape-view"
});

You can add styles using this class:

.landscape-view{
    background color: #333333;
}

Or you can interact via JavaScript:

var navigation = new Navigation(document.getElementById("navigation"),{
    landscapeClass: "landscape-view"
});

window.addEventListener("resize", function(){
    if(navigation.classList.contains("landscape-view")){
        navigation.classList.add("myClass");
    }
});

See the list of tutorials for other ways to modify the navigation bar and add features.