पृष्ठ के शीर्ष सामग्री को अवरुद्ध करने वाला शीर्ष नौसेना बार

Question

मेरा यह ट्विटर बूटस्ट्रैप कोड है

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

लेकिन जब मैं पृष्ठ की शुरुआत देख रहा होता हूं, तो नौसेना पट्टी पृष्ठ के शीर्ष के पास मौजूद कुछ सामग्री को रोक रही है। पृष्ठ के शीर्ष को देखे जाने पर इसे कम करने के लिए किसी भी विचार को निम्न सामग्री के निचले हिस्से में धकेल दिया जाता है ताकि सामग्री बार पट्टी द्वारा अवरुद्ध न हो?

Comments

संभव है कि ट्विटर बूटस्ट्रैप नेवबार के शीर्ष

— यूजर 2428107

@ user2428107 यह प्रश्न बाद में पोस्ट किया गया था।

— जेजेपी

Answer 1

अपने सीएसएस में जोड़ें:

body { 
    padding-top: 65px; 
}

से बूटस्ट्रैप डॉक्स :

जब तक आप शरीर के शीर्ष पर पैडिंग को नहीं जोड़ते हैं, तब तक निश्चित नावबार आपकी अन्य सामग्री को ओवरले कर देगा।

Comments

उत्तरदायी बूटस्ट्रैप के लिए इसे कोड करने के लिए @Spajus द्वारा नीचे दिया गया अतिरिक्त जवाब देखें

— जेसन कैप्रीओटी

निश्चित रूप से @media (न्यूनतम-चौड़ाई: 980px) {शरीर {गद्दी-शीर्ष: 60px; }}

— टेड

जबकि अन्य उत्तर इसे और अधिक स्पष्ट रूप से संबोधित करते हैं, यह आधिकारिक उत्तर है जैसा कि फिक्स्ड

— नेवबर

यदि उपयोगकर्ता के पास संकरी स्क्रीन है या बस विंडो का आकार बदल देता है तो यह कैसे काम करेगा? सबसे ऊपर की सामग्री फिर से विस्तारित नौसेना बार अनुभाग द्वारा अवरुद्ध हो जाएगी।

— कोनराड विल्टर्स्टन

Answer 2

यदि आप उत्तरदायी बूटस्ट्रैप का उपयोग कर रहे हैं तो इस तरह से गद्दी जोड़ना पर्याप्त नहीं है। इस स्थिति में जब आप अपनी विंडो का आकार बदलते हैं, तो आपको पृष्ठ के शीर्ष और नावबार के बीच एक अंतर मिलेगा। एक उचित समाधान इस तरह दिखता है:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Comments

उत्तम। यह वास्तव में किसी तरह बूटस्ट्रैप में एकीकृत होना चाहिए। आपको फोर्क करना चाहिए और पुल अनुरोध सबमिट करना चाहिए।

— ब्रितोहालोरन 13

अच्छा समाधान है, लेकिन अभी भी कुछ हल नहीं हुआ है। इस प्रश्न पर एक नज़र डालें जो मैंने अभी बनाया है और देखें कि क्या कोई इस पर हाथ दे सकता है। stackoverflow.com/questions/12763707/…

— एलिपिटर

इससे भी अधिक संक्षेप में: @मीडिया (न्यूनतम-चौड़ाई: 981px) {शरीर {पैडिंग-टॉप: 60 पीएक्स; }}

— टेड

@ मेरे लिए इसे मिनट-चौड़ाई होना चाहिए: 980px ;-)

— white_gecko

@white_gecko योग्य। हां। 980 कुछ अतिरिक्त विशेष अद्वितीय बनाना चाहते थे;;

— टेड

Answer 3

बूटस्ट्रैप 3 के लिए, वर्ग इस समस्या navbar-static-topको navbar-fixed-topरोकता है, जब तक कि आपको नेवबार की आवश्यकता हमेशा दिखाई न दे।

Comments

यह काम हालांकि नेवबार के ऊपर कुछ जगह छोड़ सकता है। आपको site.cs को संशोधित करने और शरीर से गद्दी-शीर्ष 80px निकालने की आवश्यकता हो सकती है।

— ZZZ

मैंने सब कुछ करने की कोशिश की और यह एकमात्र उत्तर है जिसने काम किया। क्योंकि यह सबसे सामान्य समाधान है और स्क्रीन के आकार पर निर्भर नहीं करता है, यह सही उत्तर होना चाहिए।

— ब्लेयरगें 23

इससे समस्या ठीक हो गई। यह काम नौबत-तय-टॉप के बजाय क्यों होता है?

— hlyates

इसने बूटस्टैप 3.3.4 के लिए काम नहीं किया। मैं बूटस्ट्रैप साइट getbootstrap.com/examples/navbar-fixed-top पर निश्चित नौसेना उदाहरण देखता हूं , यह पैडिंग-टॉप का उपयोग करता है

— एलिरेज़ा फताही

जब यह काम करता है, तो यह नाविक को स्थिर बनाता है और स्थिर नहीं होता है। इसका मतलब है कि जब आप नीचे स्क्रॉल करते हैं तो नेवर गायब हो जाएगा ... कम से कम मेरे लिए यह अच्छा नहीं है।

— tbkn23

Answer 4

आपके संदर्भ के लिए बहुत अधिक उपयोगी समाधान, यह मेरी सभी परियोजनाओं में सही काम करता है:

से अपना पहला 'div' बदलें

<div class='navbar navbar-fixed-top'>

सेवा

<div class="navbar navbar-default navbar-static-top">

Comments

स्क्रॉल करते समय स्टेटिक नेबार गायब हो जाता है।

— डैनियल सी। सोबरल

पुन :: @ DanielC.Sobral प्रतिक्रिया - आप इसे js में निश्चित एक के लिए स्विच कर सकते हैं अगर यह ऊपर से स्क्रॉल करता है

— obie

Answer 5

मैं इस समस्या को हल करने के लिए jQuery का उपयोग कर रहा हूं। यह बीएस 3.0 के लिए स्निपेट है:

$(window).resize(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);        
});

Comments

मैं नेवबार पर एक छवि का उपयोग कर रहा था और सामग्री छिपी होने के साथ वास्तविक समस्याएं थी। यह पूरी तरह से काम किया! धन्यवाद!

— रिचर्ड वर्नो

आपके समाधान के लिए बहुत बहुत धन्यवाद। इस जवाब ने मेरे लिए एक आकर्षण की तरह काम किया :) मैं एक चीज जोड़ना चाहूंगा। जब आप पृष्ठ को लोड करते हैं, तो शरीर को स्वचालित रूप से समायोजित करने से पहले शीर्ष पर सेट किया जाता है क्योंकि jquery doesnt तुरंत चलता है। इसे चिकना बनाने के लिए, मैंने इसे सीएसएस बॉडी में जोड़ा {{पैडिंग-टॉप: // मेरी नेबर की प्रारंभिक ऊंचाई; } यह सुचारु संक्रमण में मदद करता है! फिर से धन्यवाद!

— AAA

एक प्रोग्राम समाधान को प्रेरित करने के लिए धन्यवाद! मैं अब GWT में एक अच्छा काम कर अच्छा क्रियान्वित अच्छी तरह से संरचित कोड के साथ एक महान काम कर रहा है ... जावास्क्रिप्ट की कमी के लिए धन्यवाद ;-)

— एलेक्स वर्डेन

Answer 6

मुझे अपनी वास्तविक निश्चित नौसेना पट्टी से ठीक पहले एक डमी नॉन-फिक्स्ड नेवी बार बनाने में अच्छी सफलता मिली है।

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

रिक्ति सभी स्क्रीन आकारों पर शानदार काम करती है।

Comments

मुझे लगा कि यह पहली बार में जवाब था और एक उलाहना देने के लिए तैयार था। लेकिन तब मुझे एहसास हुआ कि यह काम नहीं करता जब आकार संकीर्ण हो जाता है तो यह मेनू बटन को ढेर कर देता है। :-(

— स्टीव

आप सही हैं यह अतिरिक्त कोड के बिना मेनू स्टैकिंग के साथ काम नहीं करेगा। मैं आमतौर पर अपनी मेन्यू बार को ऊँचाई की एक लाइन पर रखता हूँ और मेनू ऑप्शंस को हैमबर्गर बटन में बदल देता हूँ, जब साइज़ कम हो जाता है।

— जेसन बटलर

मुझे पता नहीं क्यों, लेकिन यह काम करता है। क्या आप इस बारे में विस्तार से बता सकते हैं कि यह क्यों काम करता है?

— लाल सुरक्षा

महान विचार! क्योंकि यह उपयोगी है जब कुछ पृष्ठों में एक नावबार होता है और कुछ नहीं, क्योंकि यह सीएसएस फ़ाइल से अंतर करना संभव नहीं है।

— लॉरेंट

यह निश्चित रूप से जाने का रास्ता है। यह सभी उपकरणों पर काम करता है, तब भी जब नावबार दो लाइनों में टूट जाता है। +1

Answer 7

MVC 5 ट्यूटोरियल से निकाली गई मेरी परियोजना में मैंने पाया कि बॉडी पैडिंग को बदलने का कोई प्रभाव नहीं पड़ा। निम्नलिखित ने मेरे लिए काम किया:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

यह उन मामलों को हल करता है जहां नेवबार 2 या 3 लाइनों में गुना होता है। यह बूटस्ट्रैप में डाला जा सकता है। लाइनों के बाद कहीं भी बॉडी {मार्जिन: 0; }

Answer 8

बूटस्ट्रैप v4 स्टार्टर टेम्पलेट सीएसएस का उपयोग करता है:

body {
  padding-top: 5rem;
}

Answer 9

जैसा कि ट्विटर से इस उदाहरण पर देखा गया है , इसे उस पंक्ति से पहले जोड़ें जिसमें उत्तरदायी शैली की घोषणाएं शामिल हैं:

<style> 
    body {
        padding-top: 60px;
    }
</style>

इस तरह:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

Answer 10

navbar के साथ navbar-default सब कुछ ठीक काम करता है, लेकिन अगर आप navbar-fixed-top का उपयोग कर रहे हैं, तो आपको कस्टम स्टाइल बॉडी को शामिल करना होगा {padding-top: 60px;} अन्यथा यह नीचे दी गई सामग्री को ब्लॉक कर देगा।

Comments

यह किसी भी जानकारी को नहीं जोड़ता है जो पहले से ही अन्य उत्तरों में नहीं है।

— टॉम ज़िक

Answer 11

दो समस्याएं यहां होंगी:

1. पृष्ठ लोड (सामग्री छिपी)
2. इस तरह के आंतरिक लिंक शीर्ष पर स्क्रॉल करेंगे, और नेवबार द्वारा छिपाए जाएंगे:

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

बूटस्ट्रैप 4 w / आंतरिक पेज लिंक

1) को ठीक करने के लिए, जैसा कि मार्टिज़न बर्गर ने ऊपर कहा था, बूटस्ट्रैप v4 स्टार्टर टेम्पलेट सीएसएस का उपयोग करता है:

body {
  padding-top: 5rem;
}

2 को ठीक करने के लिए) इस मुद्दे को देखें । यह कोड अधिकतर काम करता है (लेकिन उसी हैश के 2 क्लिक पर नहीं):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

यह कोड jQuery के साथ लिंक को एनिमेट करता है (स्लिम jQuery नहीं):

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

Answer 12

सबसे अच्छा समाधान जो मैंने अब तक पाया है, जिसमें हार्ड कोडिंग हाइट शामिल नहीं है और ब्रेकप्वाइंट <nav...मार्कअप में एक अतिरिक्त टैग जोड़ना है ।

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

इसे इस तरह करने से @mediaब्रेकप्वाइंट समान होते हैं, ऊंचाई समान होती है (बशर्ते आपकी navbar-brandसबसे ऊंची वस्तु है navbarलेकिन आप गैर-तत्व में दूसरे तत्व को आसानी से प्रतिस्थापित कर सकते हैं fixed-top।

जहां यह असफलता स्क्रीन पाठकों के साथ है, जो अब 2 navbar-brandतत्वों को प्रस्तुत करेगा । यह not-for-srउस तत्व को स्क्रीन पाठकों के लिए दिखाने से रोकने के लिए एक वर्ग की आवश्यकता को इंगित करता है। हालाँकि वह वर्ग मौजूद नहीं है https://getbootstrap.com/docs/4.0/utilities/screenreaders/

मैंने स्क्रीन रीडर समस्या के लिए क्षतिपूर्ति करने की कोशिश की है, aria-hidden="true"लेकिन https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ से लगता है कि यह तब संभव नहीं होगा जब स्क्रीन रीडर होगा फ़ोकस मोड में, जो निश्चित रूप से एकमात्र समय है जब आपको वास्तव में काम करने की आवश्यकता होती है ...

Answer 13

का उपयोग करने percentageसे बेहतर समाधान है pixels।

body {
  padding-top: 10%; //This works regardless of display size.
}

यदि आवश्यक हो तो आप breakpointsकिसी अन्य उत्तर में बताए अनुसार अलग-अलग जोड़कर स्पष्ट हो सकते हैं@spajus

Answer 14

EDIT: यह समाधान बूटस्ट्रैप के नए संस्करणों के लिए व्यवहार्य नहीं है, जहां नव-प्रतिलोम और नवबर-स्टेटिक-टॉप कक्षाएं उपलब्ध नहीं हैं।

MVC 5 का उपयोग करना, जिस तरह से मैंने तय किया, वह था कि मैं अपना खुद का साइट जोड़ें। body{padding: 0}

और मैंने _Layout.cshtml की शुरुआत में कोड को बदल दिया:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

Comments

navbar-static-topको बूटस्ट्रैप 4 में परिभाषित नहीं किया गया है। ना हीnavbar-inverse

— बोटकोडर

मुझे लगता है कि यह जवाब आउट-डेटेड है। मैं उत्तर के लिए एक नोट जोड़ूंगा।

— अल्ट्रोमन द टॅकमैन

Answer 15

<div class='navbar' data-spy="affix" data-offset-top="0">

यदि आपका नवाब मूल रूप से पृष्ठ के शीर्ष पर है, तो मान को 0. पर सेट करें, अन्यथा, data-offset-topअपने नावबार के ऊपर सामग्री के मूल्य के लिए मान सेट करें ।

इस बीच, आपको इस cssतरह से संशोधित करने की आवश्यकता है :

.affix{
  width:100%;
  top:0;
  z-index: 10;
}

Answer 16

इसे जोड़ो:

.navbar {
  position: relative;
}

Answer 17

आपको जोड़ना चाहिए

#page {
  padding-top: 65px
}

एक चिपचिपा पाद या कुछ और नष्ट करने के लिए नहीं

Answer 18

अपने JS में जोड़ें:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

Comments

यह तब काम नहीं करेगा जब विंडो को आकार दिया गया हो क्योंकि आपका पैडिंग-टॉप केवल तैयार दस्तावेज पर ही लगाया गया हो।

— बोटकोडर

Answer 19

आप स्क्रीन रिज़ॉल्यूशन के आधार पर मार्जिन सेट कर सकते हैं

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}