শীর্ষ নেভ বার পৃষ্ঠার শীর্ষ সামগ্রী ব্লক করে

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

টুইটার বুটস্ট্র্যাপের

— নকলটি নভবার

@ user2428107 এই প্রশ্নটি পরে পোস্ট করা হয়েছিল।

— জাজপিপি

Answer 1

আপনার সিএসএসে যুক্ত করুন:

body { 
    padding-top: 65px; 
}

থেকে বুটস্ট্র্যাপ ডক্স :

আপনি শরীরের শীর্ষে প্যাডিং যোগ না করা হলে স্থির নাভবার আপনার অন্যান্য সামগ্রীকে ওভারলে করবে।

Comments

প্রতিক্রিয়াশীল বুটস্ট্র্যাপের জন্য কীভাবে এটি কোড করতে যায় তার জন্য নীচে @ স্পাজাসের অতিরিক্ত উত্তর দেখুন

— জেসন ক্যাপ্রিওটি

@ মিডিয়া (কমপক্ষে প্রস্থ: 980px) {বডি ding প্যাডিং-শীর্ষ: 60px; এর সাথে আরও কিছুটা সংক্ষিপ্ততার সাথে অবশ্যই অন্য উত্তরটির সাথে রোল করুন roll }}

— টেড

অন্য উত্তরগুলি এটিকে আরও

— স্পষ্টভাবে সম্বোধন

যদি ব্যবহারকারী সংকীর্ণ স্ক্রিন থাকে বা কেবল উইন্ডোটির আকার পরিবর্তন করে তবে কীভাবে এটি কাজ করবে? শীর্ষস্থানীয় বিষয়বস্তুগুলি প্রসারিত এনএভি বার বিভাগ দ্বারা আবার অবরুদ্ধ করা হবে।

— কনরাড ভিল্টারস্টন

Answer 2

যদি আপনি প্রতিক্রিয়াশীল বুটস্ট্র্যাপ ব্যবহার করেন তবে এর মতো কোনও প্যাডিং যুক্ত করা যথেষ্ট নয়। এই ক্ষেত্রে যখন আপনি আপনার উইন্ডোটির আকার পরিবর্তন করবেন আপনি পৃষ্ঠার শীর্ষস্থান এবং নভবারের মধ্যে একটি ফাঁক পাবেন। একটি সঠিক সমাধান এর মতো দেখায়:

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

Comments

পারফেক্ট। এটি সত্যিই কোনওভাবে বুটস্ট্র্যাপে একীভূত করা উচিত। আপনার কাঁটাচামচ করে একটি টানার অনুরোধ জমা দেওয়া উচিত।

— ব্রিটোহলোরান

ভাল সমাধান, তবে এখনও কিছু সমাধান হয়নি। আমি সবে তৈরি এই প্রশ্নটি একবার দেখুন এবং দেখুন যে কেউ এর উপর হাত দিতে পারে কিনা। stackoverflow.com/questions/12763707/...

— ElPiter

আরও বেশি সংক্ষেপে: @ মিডিয়া (ন্যূনতম প্রস্থ: 981px) {বডি {প্যাডিং-শীর্ষ: 60px; }}

— টেড

@ টেড আমার জন্য এটি ন্যূনতম প্রস্থ হতে হবে: 980px ;-)

— সাদা_জেকো

পুনঃটুইট হাঁ। সেই 980 মাত্র কিছুটা অতিরিক্ত বিশেষ অনন্য হতে চেয়েছিল ;-)

— টেড

Answer 3

বুটস্ট্র্যাপ 3-এর জন্য, ক্লাসটি এই সমস্যাটির navbar-static-topপরিবর্তে navbar-fixed-topবাধা দেয়, যদি না আপনার সবসময় দৃশ্যমান হওয়ার জন্য নাবারের প্রয়োজন হয়।

Comments

এটি কাজ করে তবে নভবারের উপরে কিছু জায়গা ছেড়ে যেতে পারে। আপনাকে সাইট। সিএস সংশোধন করতে এবং শরীর থেকে প্যাডিং-টপ ৮০ পিক্স অপসারণ করতে হবে।

— জেডজেড

আমি সব কিছু চেষ্টা করেছিলাম এবং এটিই কেবল উত্তরটি কাজ করে। কারণ এটি সর্বাধিক সাধারণ সমাধান এবং পর্দার আকারের উপর নির্ভর করে না, এটি সঠিক উত্তর হওয়া উচিত।

— ব্লেয়ারজ 23

এটি সমস্যার সমাধান করেছে। এই নাবার-স্থির-শীর্ষের পরিবর্তে কেন কাজ করে?

— ই

এটি বুটস্ট্যাপ ৩.৩.৪ এর জন্য কাজ করে নি। আমি বুটস্ট্র্যাপ সাইট getbootstrap.com/example/navbar-fixed- শীর্ষে স্থির নেভ উদাহরণ দেখতে পাচ্ছি , এটি প্যাডিং-টপ ব্যবহার করে

— আলিরাজা ফাত্তাহী

এটি কাজ করার সময় এটি নভবারকে স্থির করে তোলে এবং স্থির করে দেয় না। তার মানে আপনি যখন নেবারটি নীচে স্ক্রোল করবেন তখন অদৃশ্য হয়ে যাবে ... কমপক্ষে আমার পক্ষে এটি ভাল নয়।

— tbkn23

Answer 4

আপনার রেফারেন্সের জন্য আরও অনেক সহজ সমাধান, এটি আমার সমস্ত প্রকল্পে নিখুঁতভাবে কাজ করে:

আপনার প্রথম 'ডিভ' থেকে পরিবর্তন করুন

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

প্রতি

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

Comments

স্থির নববার স্ক্রোল করার সময় অদৃশ্য হয়ে যায়।

— ড্যানিয়েল সি সোব্রাল

পুনঃ @ @ ড্যানিয়েল.সোবরাল প্রতিক্রিয়া - এটি শীর্ষে স্ক্রোল করে যদি আপনি এটি

— জেএসে

Answer 5

আমি এই সমস্যাটি সমাধান করতে jQuery ব্যবহার করছি। এটি বিএস 3.0.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

আমি নাবারের উপরে একটি চিত্র ব্যবহার করছিলাম এবং সামগ্রীটি গোপনে আসার ক্ষেত্রে সমস্যা ছিল। এটি নিখুঁতভাবে কাজ করেছে! ধন্যবাদ!

— রিচার্ড ভার্নো

আপনার সমাধানের জন্য আপনাকে অনেক ধন্যবাদ। এই উত্তরটি আমার জন্য আকর্ষণীয় কাজ করেছে :) আমি একটি জিনিস যুক্ত করতে চাই like আপনি পৃষ্ঠাটি লোড করার সময়, দেহটি স্বয়ংক্রিয়ভাবে স্বয়ংক্রিয়ভাবে সামঞ্জস্য হওয়ার আগে শরীরটি শীর্ষে সেট হয়ে যায় কারণ jquery তাত্ক্ষণিকভাবে চলবে না। এটিকে মসৃণ করতে, আমি এটি সিএসএস বডি-প্যাডিং-শীর্ষে যুক্ত করেছি: // আমার নববারের প্রাথমিক উচ্চতা; Smooth এটি মসৃণ ট্রানজিশনে সহায়তা করে! আবার আপনাকে ধন্যবাদ!

— এএএ

একটি অগ্রগতি সমাধান অনুপ্রেরণা জন্য ধন্যবাদ! আমি এখন জিডব্লিউটি-তে চমৎকার এনক্যাপসুলেটেড ভাল কাঠামোগত কোড সহ একটি দুর্দান্ত কার্যকারিতা বাস্তবায়ন করছি ... জাভাস্ক্রিপ্টের অভাবের জন্য ধন্যবাদ ;-)

— অ্যালেক্স ওয়ার্ডেন

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

এমভিসি 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 লাইনে ফোল্ড করে। এটি লাইন বডি {মার্জিনের পরে কোথাও বুটস্ট্র্যাপ.এসএস-এ canোকানো যেতে পারে: 0; }

Answer 8

বুটস্ট্র্যাপ ভি 4 স্টার্টার টেম্পলেট CSS ব্যবহার করে:

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

নাভবারের সাথে নভবার-ডিফল্ট সবকিছু ঠিকঠাক কাজ করে, তবে আপনি যদি নাবার-ফিক্সড-টপ ব্যবহার করেন তবে আপনাকে কাস্টম স্টাইলের বডি {প্যাডিং-টপ: 60px; include অন্তর্ভুক্ত করতে হবে অন্যথায় এটি সামগ্রীগুলির নীচে অবরুদ্ধ করবে।

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 ডাব্লু / অভ্যন্তরীণ পৃষ্ঠাগুলি লিঙ্কগুলি

1) ঠিক করতে, মার্টিজান বার্গার যেমন উপরে বলেছেন, বুটস্ট্র্যাপ ভি 4 স্টার্টার টেম্পলেট CSS ব্যবহার করে:

body {
  padding-top: 5rem;
}

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/example/sensible-aria-usage/hided/ ইঙ্গিত দিচ্ছে যে স্ক্রিন রিডারটি সম্ভবত এটি কাজ করবে না ফোকাস মোডে যা অবশ্যই কেবলমাত্র আপনার প্রয়োজন সময় কাজ করার জন্য ...

Answer 13

ব্যবহার percentageকরা তুলনায় অনেক ভাল সমাধান pixels।

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

প্রয়োজনে আপনি এখনও breakpointsউত্তর দ্বারা উল্লিখিত হিসাবে আলাদা যোগ করে স্পষ্ট করা যেতে পারে@spajus

Answer 14

সম্পাদনা: বুটস্ট্র্যাপের নতুন সংস্করণগুলির জন্য এই সমাধানটি কার্যকর নয়, যেখানে নাবার-ইনভার্স এবং নাবার-স্ট্যাটিক-শীর্ষ শ্রেণিগুলি উপলব্ধ নেই।

এমভিসি 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 তে সেট করুন Otherwise অন্যথায় এর জন্য মানটি সেট করুন 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

আপনার জেএস এ যুক্ত করুন:

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;
}