हेल्लो दोस्तों आज हम Responsive Input Field in Navbar को HTML एवं CSS Code के माध्यम से बनाने वाले है जिसको हम अपने ब्लॉगर या वेबसाइट में Use कर सकते है यदि आप भी Responsive Input Field को कैसे बनाया जाता है,को सीखना चाहते है तो आप हमारे इस पोस्ट को आखिरी तक पढ़े
Responsive Input Field in Navbar Demo
Responsive Input Field in Navbar को Create करने के लिए हम कुछ CSS Code के बारे में बताएँगे जिससे आप अपने अनुसार Responsive Input Field in Navbar को कस्टमाइज कर सके सबसे पहले हम उसके Body वाले सेक्शन को बनायेंगे इसके लिए हमें कुछ Css Code को लिखना होगा
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background:#f1f1;
}
ऊपर दिए गए कोड में हमने Responsive Input Field in Navbar का body Create कर लिए है इसके अंतर्गत हमने फॉण्ट और बैकग्राउंड को कलर दिया है
अब हमारा Next Step है जिसमे हम Responsive Input Field in Navbar को navbar में सेट करेंगे इसमें हम navbar को कलर देंगे
.topnav {
overflow: hidden;
background-color: #f9be00;
}
नीचे दिए गए CSS Code से हम Responsive Input Field in Navbar में जो लिंक है या उसमे जो text लिखे गए है उसे बनायेंगे
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
उपरोक्त CSS कोड से आप navbaar के field में लिखे गए text स्पेस को कस्टमाइज कर पाएंगे
अब हम top navbar में search area को बनायेंगे
.topnav .search-container {
float: right;
}
इस कोड से हम search field container को position दिए है
अब हमें search field container के input field को style देंगे
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
अब इसके बाद हम topnav search container button को style देंगे
.topnav .search-container button {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
background: #f1f1f1;
font-size: 17px;
border: none;
cursor: pointer;
}
अब हमारे Responsive Input Field in Navbar का style तैयार है अभी इसमें बहुत से CSS कोड है जिसको हम नीचे कॉपी कोड area में पूरा दिए है यदि आप चाहे तो वहां से कॉपी कर सकते है
अब हमारा Responsive Input Field in Navbar तैयार हो चूका है आप चाहे तो इसको अपने वेबसाइट में इसे use कर सकते है इसResponsive Input Field in Navbar के HTML, CSS कोड को ऊपर दिए गए कॉपी बटन से कॉपी कर सकते है