<nav class="container-fluid site-header has-icon" role="navigation" aria-label="main"> <div class="container"> <div class="nav-left"> <a href="#" class="icon-img"> <img src="https://prodacademystorage.blob.core.windows.net/public/images/icons/programs/level-1.svg" alt="level 1 icon"> </a> <div class="wlt-title"> <div class="primary">Site</div> <div class="secondary">Name</div> </div> <ul class="nav-links hide-xl"> <li class="active"><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> </ul> </div> <div class="nav-right"> <button class="wlt-btn btn-icon hide-md"> <i class="fas fa-file-alt"></i> </button> <button class="wlt-btn btn-icon hide-md"> <i class="fas fa-comment-dots" aria-hidden="true"></i> </button> <button class="wlt-btn user-menu icon-right hide-md"> <span class="wlt-avatar">BW</span> <i class="fas fa-caret-down" aria-hidden="true"></i> </button> <button class="hamburger-menu wlt-btn btn-icon d-md-none"> <i class="far fa-bars" aria-hidden="true"></i> </button> </div> </div> </nav> <div class="container-fluid sub-header"> <div class="container"> <p class="text">Some fun text!</p> <a class="right-link" href="#">View »</a> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter