<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar-dark bg-primary text-light py-2"> <div class="container-nav topheader"> <div class="d-flex justify-content-between"> <div class="left"> <a class="text-light logo lead" terget="_blank" href="#">Logo</a> </div> <div class="kanan"> Sair </div> </div> </div> </div> <div class="bg-dark text-white sticky-top shadow-sm"> <div class="container-nav"> <ul class="nav nav- nav-fill"> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">New</span></a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">New</span></a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">New</span></a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">Setting</span></a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">Setting</span></a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">Setting</span></a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#"><span class="d-none d-sm-inline-block d-md-inline-block">Setting</span></a> </li> </ul> </div> </div> <iframe src="https://www.w3schools.com" name="iframe_a" title="Iframe Example"></iframe> <div id="widget-links"> <ul class="list-unstyled bg-dark"> <li><a href="https://www.w3schools.com" target="iframe_a">Sobre</a></li> <li><a href="#">Evangelização</a></li> <li><a href="#">Como Chegar</a></li> <li><a href="#">Home</a></li> <li><a href="#">Programação</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Evangelização</a></li> <li><a href="#">Como Chegar</a></li> <li><a href="#">Home</a></li> <li><a href="#">Programação</a></li> <li><a href="#">Sobre</a></li> </ul> </div>

body{ background-color: #0003; } .container-nav { max-width: 1140px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } #widget-links { list-style-type: none; margin: 0; padding: 0; width: 200px; } #widget-links a { display: block; color: white; padding: 8px 0 8px 16px; text-decoration: none; } #widget-links a:hover { background-color: white; color: black; } #iframe{ margin-left:400px; z-index: 3; height="30px" width="50%" }