"Menu Ex"
Bootstrap 4.1.1 Snippet by ayhncalik

<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 ----------> <header class="header_area"> <div class="top_menu"> <div class="container"> <div class="row"> <div class="col-lg-7"> <div class="float-left"> <p><a href="#"> Kampanyalar </a></p> <p><a href="https://www.viccoshop.com.tr/Hesabim.aspx#/Siparislerim"> Sipariş Takibi </a></p> </div> </div> <div class="col-lg-5"> <div class="float-right"> <ul class="right_side"> <li> <a href="https://www.viccoshop.com.tr/UyeGiris.aspx"> Giriş Yap </a> </li> <li> <a href="https://www.viccoshop.com.tr/UyeOl.aspx"> üye ol </a> </li> <li> <a href="https://www.viccoshop.com.tr/sepetim.aspx"> sepetim </a> </li> </ul> </div> </div> </div> </div> </div> <div class="main_menu"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light w-100"> <!-- Brand and toggle get grouped for better mobile display --> <a class="navbar-brand logo_h" href="index.html"> <img src="https://www.viccoshop.com.tr/Uploads/EditorUploads/viccologo.png" alt="" /> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse offset w-100" id="navbarSupportedContent" > <div class="row w-100 mr-0"> <div class="col-lg-9 pr-0" style="margin-top: 30px; margin-left:30px;"> <ul class="nav navbar-nav center_nav pull-right"> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/okul-ve-oncesi">Okul ve Öncesi</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/yeni-sezon">Yeni Sezon</a> </li> <li class="nav-item submenu dropdown"> <a href="https://www.viccoshop.com.tr/tumurunler?filtre=[{%22FilterType%22:%22tdetay%22,%22FilterId%22:%227%22,%22FilterValues%22:[%2221%22]}]" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Kız</a > <ul class="dropdown-menu"> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/ilk-adim?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2221%22]}]" >İlk Adım</a > </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/bebek?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2221%22]}]" >Bebek</a > </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/cocuk?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2221%22]}]" >Çocuk</a > </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/genc?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2221%22]}]">Genç</a> </li> </ul> </li> <li class="nav-item submenu dropdown"> <a href="https://www.viccoshop.com.tr/tumurunler?filtre=[{%22FilterType%22:%22tdetay%22,%22FilterId%22:%227%22,%22FilterValues%22:[%2220%22]}]" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Erkek</a > <ul class="dropdown-menu"> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/ilk-adim?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2220%22]}]">İlk Adım</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/bebek?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2220%22]}]" >Bebek</a > </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/cocuk?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2220%22}]" >Çocuk</a > </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/genc?filtre=[{%22filtertype%22:%22tdetay%22,%22filterid%22:%227%22,%22filtervalues%22:[%2220%22]}]" >Genç</a > </li> </ul> </li> <li class="nav-item submenu dropdown"> <a href="https://www.viccoshop.com.tr/aksesuar-4" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Aksesuar</a > <ul class="dropdown-menu"> <li class="nav-item" > <a class="nav-link" href="https://www.viccoshop.com.tr/Okul-Cantasi">Okul Çantası</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/Bebek-Cantasi" >Bebek Çantası</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/kalem-kutusu">Kalem Kutusu</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/corap">Çorap</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="https://www.viccoshop.com.tr/indirimli-urunler">Fırsat Garajı</a> </li> </ul> </div> <div class="col-lg-5 pr-0"> <ul class="nav navbar-nav navbar-right right_nav pull-right"> <li class="nav-item"> <a href="#" class="icons"> <i class="ti-search" aria-hidden="true"></i> </a> </li> <li class="nav-item"> <a href="#" class="icons"> <i class="ti-shopping-cart"></i> </a> </li> <li class="nav-item"> <a href="#" class="icons"> <i class="ti-user" aria-hidden="true"></i> </a> </li> <li class="nav-item"> <a href="#" class="icons"> <i class="ti-heart" aria-hidden="true"></i> </a> </li> </ul> </div> </div> </div> </nav> </div> </div> </header>
@import url("https://fonts.googleapis.com/css?family=Heebo:300,400,500,700|Roboto:300,400,500"); body{line-height:24px;font-size:14px;font-family:"Roboto",sans-serif;font-weight:normal;color:#797979} h1,h2,h3,h4,h5,h6{font-family:"Heebo",sans-serif;color:#2a2a2a;font-weight:500} button:focus{outline:none;box-shadow:none} del{color:#797979;font-size:14px;font-weight:300;font-family:"Heebo",sans-serif} .list{list-style:none;margin:0px;padding:0px} a{text-decoration:none;transition:all 0.3s ease-in-out} a:hover,a:focus{text-decoration:none;outline:none} ul{list-style-type:none;margin:0;padding:0} .mt-40{margin-top:40px}.mb-20{margin-bottom:20px} .mb-40{margin-bottom:40px} .section_gap{padding:120px 0px} @media (max-width: 991px){.section_gap{padding:80px 0px}}.section_gap_bottom_custom{padding-bottom:70px} @media (max-width: 991px){.section_gap_bottom_custom{padding-bottom:30px}}.section_gap_top{padding-top:120px} @media (max-width: 1224px){.section_gap_top{padding-top:80px}}.main_title{text-align:center;margin-bottom:75px} @media (max-width: 991px){.main_title{margin-bottom:45px}}.main_title h2{font-size:24px;color:#2a2a2a;margin-bottom:30px;font-weight:700;text-transform:uppercase}.main_title h2 span{position:relative;display:inline-block}.main_title h2 span:after{content:'';position:absolute;left:0px;bottom:-15px;width:100%;height:1px;background:#ebedee}.main_title p{font-size:14px;font-family:"Roboto",sans-serif;font-weight:normal;line-height:24px;color:#797979;margin-bottom:0px}.active{color:#71cd14}.header_area{position:relative;width:100%;top:0;left:0;z-index:99;transition:background 0.4s, all 0.3s linear}.header_area .main_menu{background:#ffffff}.header_area .navbar{padding:0px;border:0px;border-radius:0px;border-top:1px solid rgba(221,221,221,0.38)}.header_area .navbar .right_nav .nav-item{margin:0 !important}.header_area .navbar .icons{font-size:16px;line-height:80px;display:inline-block;color:#4a4a4a;margin-left:20px;text-align:center;transition:all 300ms linear 0s}.header_area .navbar .icons:hover{color:#71cd14} @media (max-width: 992px){.header_area .navbar .nav{float:left}}.header_area .navbar .nav .nav-item{margin-right:45px}.header_area .navbar .nav .nav-item .nav-link{font:400 13px/80px "Heebo",sans-serif;text-transform:uppercase;color:#2a2a2a;padding:0px;display:inline-block}.header_area .navbar .nav .nav-item .nav-link:after{display:none}.header_area .navbar .nav .nav-item:hover .nav-link,.header_area .navbar .nav .nav-item.active .nav-link{color:#71cd14}.header_area .navbar .nav .nav-item.submenu{position:relative}.header_area .navbar .nav .nav-item.submenu ul{border:none;padding:0px;border-radius:0px;box-shadow:none;margin:0px;background:#fff} @media (min-width: 992px){.header_area .navbar .nav .nav-item.submenu ul{position:absolute;top:120%;left:0px;min-width:200px;text-align:left;opacity:0;transition:all 300ms ease-in;visibility:hidden;display:block;border:none;padding:0px;border-radius:0px}}.header_area .navbar .nav .nav-item.submenu ul:before{content:"";width:0;height:0;border-style:solid;border-width:10px 10px 0 10px;border-color:#eeeeee transparent transparent transparent;position:absolute;right:24px;top:45px;z-index:3;opacity:0;transition:all 400ms linear}.header_area .navbar .nav .nav-item.submenu ul .nav-item{display:block;float:none;margin-right:0px;border-bottom:1px solid #ededed;margin-left:0px;transition:all 0.4s linear}.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link{line-height:45px;color:#2a2a2a;padding:0px 30px;transition:all 150ms linear;display:block;margin-right:0px}.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child{border-bottom:none}.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link{background:#71cd14;color:#fff} @media (min-width: 992px){.header_area .navbar .nav .nav-item.submenu:hover ul{visibility:visible;opacity:1;top:100%}}.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item{margin-top:0px}.header_area .navbar .nav .nav-item:last-child{margin-right:0px}.header_area .navbar .nav.navbar-nav.navbar-right li{margin-left:25px;margin-right:0px}.header_area .navbar .nav.navbar-nav.navbar-right li:first-child{margin-left:35px}@media (max-width: 992px){.header_area .navbar .nav.navbar-nav.navbar-right{-ms-flex-direction:row;flex-direction:row;margin-bottom:20px}.header_area .navbar .nav.navbar-nav.navbar-right .icons{background:#e4e4e4;margin-right:2px;line-height:50px;min-width:50px;min-height:50px}}.header_area .navbar .search{font-size:14px;line-height:80px;display:inline-block;color:#2a2a2a}.header_area .navbar .search i{font-weight:600}.header_area .navbar .cart{color:#2a2a2a;font-size:14px;line-height:80px}.header_area .navbar .cart i{font-weight:600}.header_area.navbar_fixed .main_menu{position:fixed;width:100%;top:-70px;left:0;right:0;transform:translateY(70px);transition:transform 500ms ease, background 500ms ease;-webkit-transition:transform 500ms ease, background 500ms ease;box-shadow:0px 3px 16px 0px rgba(0,0,0,0.1)}.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link{line-height:70px}.top_menu{background:#f6f6f6;height:30px;line-height:16px}.top_menu .float-left{padding:7px 0}.top_menu .float-left p{display:inline-block;line-height:15px;color:#4a4a4a;font-size:11px;font-family:"Roboto",sans-serif;font-weight:400;margin:0px;text-transform:uppercase;border-right:1px solid #797979;padding:0px 19px}.top_menu .float-left p:last-child{border-right:0px}.top_menu .right_side{margin-bottom:0px;padding:7px 0}.top_menu .right_side li{display:inline-block}.top_menu .right_side li:last-child a{padding-right:15px;border-right:0px}.top_menu .right_side li a{font-size:11px;color:#4a4a4a;display:inline-block;border-right:1px solid #797979;transition:all 300ms linear 0s;text-transform:uppercase;padding:0px 19px}.top_menu .right_side li:hover a{color:#71cd14}.top_menu .ac_btn{line-height:28px;border:1px solid #eeeeee;display:inline-block;background:#f6f6f6;padding:0px 19px;font-size:12px;font-family:"Roboto",sans-serif;font-weight:500;color:#797979;transition:all 300ms linear 0s;margin-right:1px;margin-top:8px}.top_menu .ac_btn:hover{background:#71cd14;color:#fff;border-color:#71cd14}.top_menu .dn_btn{line-height:28px;border:1px solid #71cd14;display:inline-block;background:#71cd14;padding:0px 19px;font-size:12px;font-family:"Roboto",sans-serif;font-weight:500;color:#fff;transition:all 300ms linear 0s;margin-top:8px;border-radius:3px}.top_menu .dn_btn:hover{background:transparent;color:#2a2a2a;border-color:#71cd14}.top_menu .lan_pack{height:30px;border:1px solid #eeeeee;border-radius:3px;line-height:28px;font-size:12px;font-family:"Roboto",sans-serif;font-weight:500;padding-left:19px;padding-right:36px;color:#797979;background:#f6f6f6;margin-right:5px;margin-top:8px}.top_menu .lan_pack .current{color:#797979}.top_menu .lan_pack:after{content:"\f0d7";border:none !important;font:normal normal normal 12px/1 FontAwesome;transform:rotate(0deg);height:auto;margin-top:-6px;right:20px}.home_banner_area{background:url(../img/banner/banner-bg.jpg) no-repeat center bottom;background-size:cover;position:relative;z-index:1;min-height:790px} @media (max-width: 991px){.offer_area{background:#f6f6f6}}.offer_content{padding:132px 0px} @media (max-width: 991px){.offer_content{padding:100px 0px}}.offer_content h3{font-size:24px;font-weight:300;color:#4a4a4a}.offer_content h2{font-size:100px;line-height:80px;color:#2a2a2a;margin-bottom:0px;font-weight:700} @media (max-width: 991px){.blog-area{padding-bottom:50px}}.single-blog{margin-bottom:30px;transition:all 300ms linear 0s}.single-blog p{margin-bottom:0px}.single-blog .thumb{overflow:hidden}.single-blog .thumb img{width:100%;transition:all 300ms linear 0s}.single-blog .short_details{padding:32px 0px 37px;transition:all 300ms linear 0s}.single-blog .meta-top a{display:inline-block;color:#797979;margin-right:30px;font-weight:300;transition:all 300ms linear 0s}.single-blog .meta-top a i{margin-right:10px;position:relative;top:2px}.single-blog .meta-top a:hover{color:#71cd14}.single-blog h4{font-size:20px;margin-top:20px;margin-bottom:15px;line-height:30px;transition:all 300ms linear 0s} @media (max-width: 991px){.single-blog h4{margin-top:20px;margin-bottom:8px}}.single-blog h4 a{color:#2a2a2a}.single-blog .text-wrap{margin-bottom:22px}.single-blog .text-wrap p{font-size:15px}.single-blog .blog_btn{font-size:12px;font-weight:500;text-transform:uppercase;color:#2a2a2a}.single-blog:hover img{transform:scale(1.1)}.single-blog:hover h4{color:#71cd14}.single-blog:hover .blog_btn{color:#71cd14}.l_blog_item .l_blog_text .date{margin-top:24px;margin-bottom:15px}.l_blog_item .l_blog_text .date a{font-size:12px}.l_blog_item .l_blog_text h4{font-size:18px;color:#2a2a2a;border-bottom:1px solid #eeeeee;margin-bottom:0px;padding-bottom:20px;transition:all 300ms linear 0s}.l_blog_item .l_blog_text h4:hover{color:#71cd14}.l_blog_item .l_blog_text p{margin-bottom:0px;padding-top:20px}.causes_slider .owl-dots{text-align:center;margin-top:80px}.causes_slider .owl-dots .owl-dot{height:14px;width:14px;background:#eeeeee;display:inline-block;margin-right:7px}.causes_slider .owl-dots .owl-dot:last-child{margin-right:0px}.causes_slider .owl-dots .owl-dot.active{background:#71cd14}.causes_item{background:#fff}.causes_item .causes_img{position:relative}.causes_item .causes_img .c_parcent{position:absolute;bottom:0px;width:100%;left:0px;height:3px;background:rgba(255,255,255,0.5)}.causes_item .causes_img .c_parcent span{width:70%;height:3px;background:#71cd14;position:absolute;left:0px;bottom:0px}.causes_item .causes_img .c_parcent span:before{content:"75%";position:absolute;right:-10px;bottom:0px;background:#71cd14;color:#fff;padding:0px 5px}.causes_item .causes_text{padding:30px 35px 40px 30px}.causes_item .causes_text h4{color:#2a2a2a;font-size:18px;font-weight:600;margin-bottom:15px;cursor:pointer}.causes_item .causes_text h4:hover{color:#71cd14}.causes_item .causes_text p{font-size:14px;line-height:24px;font-weight:300;margin-bottom:0px}.causes_item .causes_bottom a{width:50%;border:1px solid #71cd14;text-align:center;float:left;line-height:50px;background:#71cd14;color:#fff;font-size:14px;font-weight:500}.causes_item .causes_bottom a+a{border-color:#eeeeee;background:#fff;font-size:14px;color:#2a2a2a}.latest_blog_area{background:#f9f9ff}.single-recent-blog-post{margin-bottom:30px}.single-recent-blog-post .thumb{overflow:hidden}.single-recent-blog-post .thumb img{transition:all 0.7s linear}.single-recent-blog-post .details{padding-top:30px}.single-recent-blog-post .details .sec_h4{line-height:24px;padding:10px 0px 13px;transition:all 0.3s linear}.single-recent-blog-post .date{font-size:14px;line-height:24px;font-weight:400}.single-recent-blog-post:hover img{transform:scale(1.23) rotate(10deg)}.tags .tag_btn{font-size:12px;font-weight:500;line-height:20px;border:1px solid #eeeeee;display:inline-block;padding:1px 18px;text-align:center;color:#2a2a2a}.tags .tag_btn:before{background:#71cd14}.tags .tag_btn+.tag_btn{margin-left:2px}.blog_categorie_area{padding-top:30px;padding-bottom:30px} @media (min-width: 900px){.blog_categorie_area{padding-top:80px;padding-bottom:80px}} @media (min-width: 1100px){.blog_categorie_area{padding-top:120px;padding-bottom:120px}}.categories_post{position:relative;text-align:center;cursor:pointer}.categories_post img{max-width:100%}.categories_post .categories_details{position:absolute;top:20px;left:20px;right:20px;bottom:20px;background:rgba(34,34,34,0.75);color:#fff;transition:all 0.3s linear;display:flex;align-items:center;justify-content:center}.categories_post .categories_details h5{margin-bottom:0px;font-size:18px;line-height:26px;text-transform:uppercase;color:#fff;position:relative}.categories_post .categories_details p{font-weight:300;font-size:14px;line-height:26px;margin-bottom:0px}.categories_post .categories_details .border_line{margin:10px 0px;background:#fff;width:100%;height:1px}.categories_post:hover .categories_details{background:rgba(222,99,32,0.85)}.blog_item{margin-bottom:50px}.blog_details{padding:30px 0 20px 10px;box-shadow:0px 10px 20px 0px rgba(221,221,221,0.3)}

Related: See More


Questions / Comments: