कैसे बनाएं: प्रतिक्रियाशील पृष्ठशीर्ष

CSS के द्वारा प्रतिक्रियाशील पृष्ठशीर्ष का उपयोग करना सीखें।

प्रतिक्रियात्मक पृष्ठभूमि बनाएं

पहला कदम - HTML जोड़ें:

<div class="header">
  <a href="#default" class="logo">कंपनी लोगो</a>
  <div class="header-right">
    <a class="active" href="#home">घर</a>
    <a href="#contact">संपर्क</a>
    <a href="#about">बारे में</a>
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

/* ग्रे पृष्ठभूमि और कुछ आंतरिक पैडिंग के साथ शीर्षक शैली सेट करें */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;

/* शीर्षक लिंक के शैली सेट करें */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;

/* Logo लिंक के शैली सेट करें (ध्यान दें कि हम लाइन हाई और फ़ॉन्ट आकार को एक-साथ सेट कर रहे हैं, ताकि फ़ॉन्ट बड़े होने पर हेडर बड़ा न बने) */
.header a.logo {
  font-size: 25px;
  font-weight: bold;

/* माउस उपर ले जाने पर पृष्ठभूमि रंग बदलें */
.header a:hover {
  background-color: #ddd;
  color: black;

/* सक्रिय/वर्तमान लिंक के शैली सेट करें */
.header a.active {
  background-color: dodgerblue;
  color: white;

/* लिंक भाग को दायाँ ओर फ्लोट करें */
.header-right {
  float: right;

/* एक मीडिया क्वेरी जोड़ें ताकि प्रतिक्रियात्मक हो - जब स्क्रीन चौड़ाई 500px या कम हो तो लिंकों को एक साथ जमा करें */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  
  .header-right {
    float: none;
  

स्वयं प्रयोग करें

संबंधित पृष्ठ

तालीम:CSS नेविगेशन टॉगल