uk_dave

Firstly, I do appreciate that W3.CSS is intended by design to responsive... however, that may not always be desirable :-) In this instance, trying to implement a W3.CSS fixed top navigation bar as per this instruction - https://www.w3schools.com/w3css/w3css_navigation.asp The issue I have is that as the browser page size decreases, the elements in the top bar then wrap onto multiple lines e.g. I have tried to implement w3-hide-small and w3-hide-medium but even with these in place they do not kick in early enough to prevent the bar from temporarily wrapping. How do I stop the elements in the navigation bar wrapping on resizing of the browser window smaller? Here is my sample top navigation bar which you can plug into the TryIt editor above to see the undesirable wrapping effect, especially around the Search input entry and Go button: <div class="w3-top"> <div class="w3-bar w3-red"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> <a href="#" class="w3-bar-item w3-button">Link 4</a> <a href="#" class="w3-bar-item w3-button">Link 5</a> <a href="#" class="w3-bar-item w3-button">Link 6</a> <a href="#" class="w3-bar-item w3-button">Link 7</a> <input type="text" class="w3-bar-item w3-input" placeholder="Search.."> <a href="#" class="w3-bar-item w3-button w3-green">Go</a> <a href="#" class="w3-bar-item w3-button w3-right">Link 8</a> </div> </div> TIA, Dave