CSS Horizontal Navbar

CSS Navigation Bar में पहले से covered basic build से आगे, एक horizontal navbar की अपनी alignment और spacing decisions होती हैं: logo कहाँ बैठता है, links कैसे spaced हैं, और जब एक row में सब कुछ के लिए काफ़ी जगह न हो तो क्या होता है।

In this page:

Logo और Links Opposite Ends पर
Nav Links को Center करना
Links को Evenly Space करना
Active Link पर Underline Indicator
जब Links के लिए जगह खत्म हो जाए तो क्या होता है

Syntax

css

ul {
  list-style-type: none;
  display: flex;
}
li a {
  display: block;
  padding: length;
}

Logo और Links Opposite Ends पर

एक बहुत common horizontal navbar pattern एक logo या brand name को left पर और navigation links को right पर रखता है, एक flex container पर justify-content: space-between इस्तेमाल करके ताकि दोनों groups बिना manual margins के automatically opposite edges पर धकेल जाएँ।

उदाहरण: Logo and Links on Opposite Ends

css

<style>
nav {
  display: flex;
  justify-content: space-between;
  background: #eee;
  padding: 8px;
}
nav > div {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
nav > div:last-child {
  background: seagreen;
}
</style>
<nav>
  <div>Logo</div>
  <div><a href="#" style="color:white;">Home</a> <a href="#" style="color:white;">About</a></div>
</nav>

Nav Links को Center करना

navigation links को एक तरफ़ धकेलने के बजाय bar के बीच में center करने के लिए, flex container पर justify-content: center इस्तेमाल करें, या अगर आप पुराना inline-block approach इस्तेमाल कर रहे हैं तो list पर text-align: center।

Note:

Accepted values:
center — items centered
flex-start — items शुरुआत में packed
flex-end — items अंत में packed
space-between — even gaps, edges पर कोई नहीं
space-around — even gaps, edges पर half-size
space-evenly — edges सहित हर जगह बराबर gaps
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Centering Nav Links

css

<style>
nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  background: #eee;
  padding: 8px;
}
nav a {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Links को Evenly Space करना

gap property किसी flex container के अंदर horizontal nav links के बीच consistent spacing जोड़ने का सबसे साफ़ तरीका है, आख़िरी वाले को छोड़कर हर link में margin-right जोड़ने वाले पुराने pattern को replace करते हुए।

Note:

Accepted values:
gap: <length> — rows और columns के लिए एक जैसा gap, जैसे 16px
gap: <row> <column> — दो values, जैसे 8px 16px
gap: <percentage> — container के relative
normal — कोई gap नहीं (initial value; multi-column 1em इस्तेमाल करता है)
row-gap | column-gap — हर direction को अलग से set करें
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Spacing Links Evenly

css

<style>
nav {
  display: flex;
  gap: 20px;
  background: #eee;
  padding: 8px;
}
nav a {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Active Link पर Underline Indicator

एक bottom-border underline किसी horizontal navbar में current page दिखाने का एक बहुत common तरीका है, अक्सर एक transition के साथ animated किया जाता है ताकि links के बीच hover करते समय underline तुरंत दिखने के बजाय smoothly slide करे।

उदाहरण: Underline Indicator on Active Link

css

<style>
a.active {
  border-bottom: 2px solid blue;
  transition: border-color 0.2s;
}
</style>
<a href="#" class="active">Home</a>
<a href="#">About</a>

जब Links के लिए जगह खत्म हो जाए तो क्या होता है

बिना किसी responsive handling के, कई links या narrow viewport वाला एक horizontal navbar या तो container से overflow होगा या दूसरी line पर wrap हो जाएगा, ये दोनों आमतौर पर टूटे हुए दिखते हैं। flex-wrap: wrap एक fallback के तौर पर links को gracefully नई line पर जाने देता है, हालांकि एक dedicated mobile hamburger menu standard production solution है।

उदाहरण: What Happens When Links Run Out of Room

css

<style>
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #eee;
  padding: 8px;
}
nav a {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Vertical Navbar Next Lesson → CSS Dropdowns