स्टोरफ्रंट थीम में नया हेड जोड़ने के लिए सबसे पहले डिस्प्ले नोन लिखे
<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>display:none;">
इस तरह की स्क्रिप्ट लिखें इसके ऊपर आप अपना हेडर लिख सकते हैं इसके लिए आप निम्न कोड यूज कर सकते हैं।
नीचे दिए गए कोड का उपयोग करने पर आप इस प्रकार का हेडर प्राप्त कर पाएंगे यह हेडर सबसे पॉपुलर है।
<nav class="navbar">
<div class="nav">
<img src="//welldonemart.com/wp-content/uploads/2021/07/IMG_20210707_082437.jpg" class="brand-logo" alt="">
<div class="nav-items">
<div class="search">
<input type="text" class="search-box" placeholder="search brand, product">
<button class="search-btn">search</button>
</div>
<a href="#"><img src="https://welldonemart.com/wp-content/uploads/2022/03/user.png" alt=""></a>
<a href="#"><img src="https://welldonemart.com/wp-content/uploads/2022/03/shopping-cart.png" alt=""></a>
</div>
</div>
</nav>
<ul class="links-container">
<li class="link-item"><a href="#" class="link">shop</a></li>
<li class="link-item"><a href="#" class="link">women</a></li>
<li class="link-item"><a href="#" class="link">men</a></li>
<li class="link-item"><a href="#" class="link">kids</a></li>
<li class="link-item"><a href="#" class="link">accessories</a></li>
</ul>
css के अंदर यह कोड डालें कस्टमाइजेशन के लिए
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'roboto', sans-serif;
}
.navbar{
position: sticky;
top: 0;
left: 0;
width: 100%;
background: #f5f5f5;
z-index: 9;
}
.nav{
padding: 10px 10vw;
display: flex;
justify-content: space-between;
}
.brand-logo{
height: 70px;
}
.nav-items{
display: flex;
align-items: center;
}
.search{
width: 500px;
display: flex;
}
.search-box{
width: 80%;
height: 40px;
padding: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid #d1d1d1;
text-transform: capitalize;
background: none;
color: #a9a9a9;
outline: none;
}
.search-btn{
width: 20%;
height: 40px;
padding: 10px 20px;
border: none;
outline: none;
cursor: pointer;
background: #1780d1;
color: #fff;
text-transform: capitalize;
font-size: 15px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.search-box::placeholder{
color: #a9a9a9;
}
.nav-items a{
margin-left: 20px;
}
.nav-items a img{
width: 30px;
}
.links-container{
width: 100%;
display: flex;
padding: 10px 10vw;
justify-content: center;
list-style: none;
border-top: 2px solid #d1d1d1;
}
.link{
text-transform: capitalize;
padding: 0 10px;
margin: 0 5px;
text-decoration: none;
color: #414242;
opacity: 0.5;
transition: .5s;
}
.link:hover{
opacity: 1;
}
#site-header .header-titles-wrapper {
margin: 0 auto 0 auto;
}
संदेश
0 टिप्पणियाँ
Thank you very much