Prevent double row in navbar (MaterializeCSS)

Question

I'm wondering if there's a way to adjust the navbar in MaterializeCSS to prevent the double row when the number of elements exceeds the width of the browser. I was thinking about some scrollable navbar like the tabs:

But I can't find a way to implement it.

Answer 1

Taking inspiration from nav-tabs, which exhibit this behaviour as standard:

Set nowrap, overflow and width on the link container (UL in this case).

nav ul { 
    white-space:nowrap;
    overflow-x: auto;
    width: 100%;
}

Set display, and unset the float on links (LI in this case).

nav ul li { 
    display: inline-block;
    float: none;
}

Codepen