Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> .main-nav { display: flex; background: orangered; color: white; border-radius: 3px; padding: 1em; font-family: sans-serif; } .main-nav > ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex: 3; } .main-nav li { margin-right: 1em; } .main-nav > form { display: flex; justify-content: flex-end; flex: 1; } .main-nav input { flex: 1; } .main-nav button { background: white; border: 0; border-radius: 1em; color: orangered; padding: 0 1em; margin-left: .3em; } @media screen and (max-width: 575px) { .main-nav { flex-direction: column; } .main-nav ul { flex-direction: row; /* Change this to 'column' to stack the links */ margin-bottom: 1em; } } </style> <nav class="main-nav"> <ul> <li>Logo</li> <li>Home</li> <li>Products</li> <li>Services</li> </ul> <form> <input type="search" placeholder="Search"> <button>Go</button> </form> </nav>
Preview