<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar_menu fixed-top" > <a href="" class="logo"> <strong>L</strong>ogo </a> <ul class="arama"> <li class="input-group"> <input type="search" name="ara" class="form-control" placeholder="Mağaza'da Ara"> <button class="btn"><span class="material-icons">search</span></button> </li> </ul> </nav> <button class="btn btn-secondary" style="border-radius: 50%; position: absolute; z-index: 1030; left: 48%; right: 50%; top: 82%;"> <span class="material-icons" style="padding: auto; color: white;">add</span> </button> <nav class="navbar_bottom_menu fixed-bottom"> <div class="bottom_menu"> <ul class="left_menu"> <a href="#"> <li> <i class="glyphicon glyphicon-home text-white"></i> Anasayfa </li></a> <a href="#"> <li> Hakkımda </li></a> <a href="#"><li> Topluluk </li></a> </ul> <ul class="orta_menu"> <a href="#"><li> + </li></a> </ul> <ul class="right_menu"> <a href="#"><li> İletişim </li></a> <a href="#"><li> Sepet <span class="btn btn-danger">1</span> </li></a> <a href="#"><li> Giris Yap </li></a> </ul> </div> </nav>

.navbar_menu{width: 100%; background: black; opacity: 0.9; height: 10%; padding: 13px 10% 0 2%;} .navbar_bottom_menu{width: 100%; background: gray; opacity: 1.0; height: 10vh;} /* Logo Tasarımı */ .logo{ color: white; text-decoration: none; font-size: 20px; float: left; padding-top: 3px;} .logo:hover{ color: white; text-decoration: none; font-size: 24px; font-style: italic; } .arama{ width: 85%; display: block; float: left; position: absolute; left: 13%; right: 2%;} .input-group span{ font-size: 19px; color: white; } .bottom_menu{ display: inline; list-style: none; padding: 0; margin:0%; } /* Bottom Menu Left Menu Tasarımı */ .left_menu{ list-style: none; float: left; margin-left: 5%; width: 30%;} .left_menu li{float: left; margin:1px 0px 5px 0px; padding: 8%; color: white; text-align:justify;} .orta_menu{ list-style: none; float: left; margin-right:3%; margin-left: 3%; width: 20%;} .orta_menu li{width:50%; float: left; margin:1px 5px ; padding: 8% 0px; color: white; text-align:center;} .right_menu{ list-style: none; float: left; margin-right: 9%; width: 25%;} .right_menu li{ float:left; margin:1px 0px 5px 0px; padding:8%; color:white; text-align:justify;} /* Bottom_Menu:hover; */ .bottom_menu a:hover li{ border-radius: 45%; background: white; opacity: 0.8; color: black; transition: 2s; }