টুইটার বুটস্ট্র্যাপ নাভবার স্থির শীর্ষ ওভারল্যাপিং সাইট


347

আমি আমার সাইটে বুটস্ট্র্যাপ ব্যবহার করছি এবং নববারের ফিক্সড শীর্ষে সমস্যা আছে am আমি যখন কেবল নিয়মিত নাবারটি ব্যবহার করি তখন সমস্ত কিছু ঠিক আছে। যাইহোক, যখন আমি এটিকে নভবার ফিক্সড শীর্ষে স্যুইচ করার চেষ্টা করি তখন সাইটের অন্যান্য সমস্ত সামগ্রী নাভিবারের মতো স্থানান্তরিত হয় এবং নাবার এটি ওভারল্যাপ করে। এখানে আমি এটি কীভাবে রেখেছিলাম তা মূলত:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

আমি বুটস্ট্র্যাপের উদাহরণগুলি হুবহু কপি করার চেষ্টা করেছি তবে এখনও নববারের ফিক্সড টপ ব্যবহার করার সময় এই সমস্যাটি রয়েছে। আমি কি ভুল করছি?

উত্তর:


527

আপনার উত্তর ডক্সে সঠিক :

বডি প্যাডিং দরকার

আপনি যদি paddingউপরে না যোগ না করেন তবে স্থির নাবারটি আপনার অন্যান্য সামগ্রীকে ওভারলে করবে <body>। আপনার নিজস্ব মানগুলি ব্যবহার করে দেখুন বা নীচে আমাদের স্নিপেট ব্যবহার করুন। টিপ: ডিফল্টরূপে, নাবারটি 50px উচ্চ।

body { padding-top: 70px; }

কোর বুটস্ট্র্যাপ সিএসএসের পরে এটি অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করুন ।

এবং বুটস্ট্র্যাপ 4 ডক্সে ...

স্থির নববার অবস্থান ব্যবহার করে: স্থির, যার অর্থ তারা ডিওমের স্বাভাবিক প্রবাহ থেকে টানা এবং অন্যান্য উপাদানগুলির সাথে ওভারল্যাপটি রোধ করতে কাস্টম সিএসএসের (যেমন প্যাডিং-টপ) প্রয়োজন হতে পারে।


16
তবে আপনি উইন্ডোটি ন্যূনতম করার সময়
নববার

5
40px এর পরে সম্ভবত এটি প্রদর্শিত হবে কারণ আপনি "কোর বুটস্ট্র্যাপ সিএসএসের পরে এবং alচ্ছিক প্রতিক্রিয়াশীল সিএসএসের আগে এটি যুক্ত করবেন না"।
কলিমার্কো

1
এই উত্তরটি সত্য, তবে আপনি যখন 40px প্যাডিংকে একটি প্রতিক্রিয়াশীল স্টাইলিং তৈরি করেন তখন ড্যান বা নিক এর উত্তর দেখুন it
টনি বাথগেট

1
আপনি প্যাডিং (বা অন্য কিছু) যুক্ত করতে না চাইলে @ qub1n থেকে উত্তরটি দেখুন।
scharfmn

2
@ জারস্কিনিড ডাব্লু 3 স্কুলস ডটকম-এ নাবার-ফিক্সড-টপের উদাহরণ একই আচরণ দেখায়। আমি এটিকে বাগ বলতে চাইছি।
টনি মার্টিন

125

অন্যরা যেমন বলেছে যে দেহে প্যাডিং-টপ যুক্ত করা দুর্দান্ত কাজ করে। তবে আপনি যখন স্ক্রিনটিকে সঙ্কুচিত করে তুলবেন (সেল ফোনের প্রস্থের কাছে) নববার এবং দেহের মধ্যে একটি ফাঁক রয়েছে। এছাড়াও, জনাকীর্ণ নববারটি কিছু সামগ্রীর আবার ওভাররাইট করে মাল্টি-লাইন বারে মোড়তে পারে।

এটি আমার জন্য এই ধরণের সমস্যাগুলি সমাধান করেছে

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

এটি ডিফল্টরূপে 40px প্যাডিং করে এবং 7ppx প্রস্থের নিচে যখন 0px হয় (যা বুটস্ট্র্যাপের ডক্স অনুযায়ী সেল ফোন লেআউট কাট অফ যেখানে ফাঁক তৈরি হবে)


1
এই সমাধানটি মূল বুটস্ট্র্যাপ সিএসএস এবং প্রতিক্রিয়াশীল সিএসএস আমদানির মধ্যেও যায়? উইন্ডোটির প্রস্থ 980 এর কম থাকলে আমি এখনও ফাঁকটি দেখতে পাচ্ছি। আমি প্রতিক্রিয়াশীল CSS এর ওভাররাইডগুলির পরবর্তী আমদানিটি অনুমান করছি। যদি আমি প্রতিক্রিয়াশীল সিএসএস আমদানি অধীনে এই সমাধান সরানো, তারপর আমি এখনও শরীর প্যাডিং পেতে প্লাস মেনু বারের মধ্যে একটি অতিরিক্ত লাইন।
slothbear

আমি টুইটার বুটস্ট্র্যাপ ২.৩.২ ব্যবহার করছি। আমি লক্ষ্য করেছি যে ডকটিতে আর 40px পরামর্শ নেই, যদিও প্রয়োজনীয়তা এখনও রয়েছে।
slothbear

1
হ্যাঁ, 40px পরামর্শটি এখনও আছে, এটি সরিয়ে নিয়েছে। মন্তব্য স্প্যাম জন্য দুঃখিত।
slothbear

3
বুটস্ট্র্যাপ দ্বারা 3. + body { padding-top: 40px; }যথেষ্ট
andilabs

8
এই সমাধানটি সঠিক পথে রয়েছে। ডকুমেন্ট হিসাবে দেহের মধ্যে কেবল প্যাডিং রাখা 3, এমনকি যথেষ্ট নয়। মিডিয়া প্রশ্নের সঠিক সংমিশ্রণের মাধ্যমে ব্রাউজারটিকে পুনরায় আকার দেওয়ার সাথে নেওয়ারটি মোড়ানো হিসাবে কাঙ্ক্ষিত প্রভাব অর্জন করা যায়। আমার ক্ষেত্রে আমাকে 1148px, 900px এবং 768px প্রস্থে প্যাডিং পরিবর্তন করতে হবে।
জন ম্যাকক্যান

35

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

আপনার প্রথম লাইনটি পরিবর্তন করুন

.navbar.navbar-fixed-top

প্রতি

.navbar.navbar-default.navbar-static-top

1
আপনি কি শুধু ট্রলিং করছেন? বা আমি কিছু তদারকি করেছি?
chyno

এটি কীভাবে 10 টি আপগেট পেয়েছে? নাভবার-ডিফল্ট কেবল রঙ এবং পটভূমির রঙ যুক্ত করে ...
ডেনি

2
নববার-স্ট্যাটিক-শীর্ষটি পরিবর্তন এবং এটি আমার পক্ষে কাজ করে। ধন্যবাদ!
কেভথনেউভেরসি

1
নববার-স্ট্যাটিক-টপ এটিকে আমার জন্যও ঠিক করে দিয়েছে। স্বল্পতম হস্তক্ষেপ
xpagesbeast

2
আপনার যদি পর্দার উপরে সর্বদা দৃশ্যমান হওয়ার জন্য নাবারের প্রয়োজন না হয় তবে এটি কাজ করে। নাবার-স্ট্যাটিক-শীর্ষটি স্থির নয়, এটি স্ক্রিনের সাথে স্ক্রোল করে। এটি বিভিন্ন নভবার
ভিক্টর আইনেস্কু

26

এই সমস্যাটি জানা গেছে এবং টুইটার বুটস্ট্র্যাপ সাইটে একটি কার্যকারিতা রয়েছে:

আপনি যখন নাবারটি সংযুক্ত করেন, নীচে লুকানো জায়গার জন্য অ্যাকাউন্টটি মনে রাখবেন। এর মধ্যে 40px বা আরও বেশি প্যাডিং যুক্ত করুন <body>। মূল বুটস্ট্র্যাপ সিএসএসের পরে এবং responsiveচ্ছিক প্রতিক্রিয়াশীল সিএসএসের আগে এটি যুক্ত করার বিষয়ে নিশ্চিত হন।

এটি আমার পক্ষে কাজ করেছে:

body { padding-top: 40px; }

9
তবে আপনি উইন্ডোটি ন্যূনতম করার সময়
নববার

1
হ্যাঁ, এই সমাধানটি মোবাইল স্ক্রিনের আকারগুলিতে ভাল কাজ করে না। আসলে আমার ফোনে ওয়াইড-স্ক্রিন মোডে এটি মূলত সাইটটিকে অকেজো করে।
টনি বাথগেট

কি optionচ্ছিক প্রতিক্রিয়াশীল সিএসএস? আমি কখনই কেবল একটি (কোর) বুটস্ট্র্যাপ সিএসএস ব্যবহার করেছি - আমি সংস্করণ 3.7.x এর উপরে কথা বলছি; এটি সংস্করণ 3.7.x এর আগে বিভিন্ন সিএসএসে বিভক্ত ছিল?
joedotnot

26

@ রায়ান, আপনি ঠিক বলেছেন, কঠোর কোডিং উচ্চতা কাস্টম নববারের ক্ষেত্রে এটি খারাপ কাজ করবে। এই কোডটি আমি BS 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);         
}); 

3
parseIntউচ্চতার CSS মূল্যবোধগুলি ব্যবহার না করে আমি কেবল ব্যবহার করেছি $('#main-navbar').height(), তবে অন্যথায় এটি খুব সহায়ক এবং আমার সমস্যাটি সমাধান করেছিল, ধন্যবাদ।
টাইলারওয়াল

আপনার নাবারটি উচ্চতা স্থির না করা না হলে এটি আপনার প্রয়োজন।
ক্রেগপি

21

আমি ফলন পাত্রে এটি রেখেছি:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

আমি এই পদ্ধতির পছন্দ করি কারণ এটি কাজ করতে প্রয়োজনীয় হ্যাকটি নথি করে তোলে, এছাড়াও এটি মোবাইল ন্যাভের জন্যও কাজ করে।

সম্পাদনা - এটি আরও ভাল কাজ করে:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

16

সমস্যাটি নভবার-ফিক্সড-টপের সাথে রয়েছে, যা আপনার সামগ্রীকে দেহ-প্যাডিং নির্দিষ্ট না করে ওভারলে করবে। এখানে প্রদত্ত কোনও সমাধান 100% ক্ষেত্রে কার্যকর হয় না। পৃষ্ঠাটি লোড হওয়ার পরে JQuery সমাধান পৃষ্ঠাটি ঝাপটায় / শিফট করে যা দেখতে অদ্ভুত দেখাচ্ছে।

আমার জন্য আসল সমাধানটি নাবার-ফিক্সড-টপ ব্যবহার নয়, তবে নভবার-স্ট্যাটিক-টপ।

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>

1
হ্যাঁ, এটি আরও ভাল, কারণ প্রতিটি স্ক্রিন আকারের জন্য শরীরের প্যাডিং গতিশীল, তাদের সমাধান ভাল নয় not
রোনেন ফেস্টিংগার

তবে তারপরে নববারের উপরে ফাঁকা সাদা জায়গার স্ট্রিপ রয়েছে।
ব্যবহারকারী 2075599

16

আমি যেমন একটি অনুরূপ প্রশ্ন পোস্ট করেছি, আমার আসল স্থির এনএভি বারের ঠিক আগে ডামি নন-ফিক্সড এনএভি বার তৈরি করার ক্ষেত্রে আমি ভাল সাফল্য পেয়েছি।

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

ব্যবধানটি সমস্ত পর্দার আকারে দুর্দান্ত কাজ করে।


এটি আমরা যা করি .. কোনও জেএস কোড, অনুমান করা বা কিছুই বাদ না দিয়ে শরীরের সামগ্রী ঠিক সঠিক স্থানে রাখে। ।
ফ্রেডআটার্স

1
থ্রিটি আরও উপাখ্যানের প্রাপ্য, পুরোপুরি সূক্ষ্মভাবে কাজ করে, নরক হিসাবে
কুরুচিযুক্ত

ধন্যবাদ, শীর্ষ প্যাডিং বা মার্জিন পিক্সেল এবং স্টাফের চেয়ে এটি অনেক বেশি মার্জিত সমাধান ...
পেড্রো রেইস

3
দুর্ভাগ্যক্রমে এটি মোবাইলের জন্য কাজ করে না, যখন নাভিরা 1 কলামে আসে।
পেড্রো রিস

15

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

আপনার প্রথম লাইনটি পরিবর্তন করুন

navbar-fixed-top

প্রতি

sticky-top

বুটস্ট্র্যাপ ডকুমেন্টেশন রেফারেন্স

প্রায় সময় তারা এই কাজটি করেছে: ডি


পৃষ্ঠাগুলি স্ক্রোল করার সময় কিছু লোক লিঙ্কগুলি দেখতে ফিক্সড-টপ ব্যবহার করতে পারে; যদিও এই বৈশিষ্ট্যটি যদি আপনার সম্পর্কে যে :) পরোয়া করি না উপযোগী হতে পারে
knowledge_is_power

এছাড়াও লক্ষ করুন যে স্টিকি-টপ অবস্থান ব্যবহার করে: স্টিকি, যা প্রতিটি ব্রাউজারে পুরোপুরি সমর্থিত নয়।
লাইভ-লাভ

14

পূর্ববর্তী সমস্ত সমাধানগুলি হার্ড-কোড 40 পিক্সেল বিশেষত এইচটিএমএল বা সিএসএসে এক ফ্যাশন বা অন্য কোনও ক্ষেত্রে। যদি নাবারে কোনও আলাদা ফন্ট-আকার বা কোনও চিত্র থাকে? আমার যদি প্রথমে বডি প্যাডিংয়ের সাথে ঝামেলা না করার কোনও ভাল কারণ থাকে ? আমি এই সমস্যার সমাধান অনুসন্ধান করছি এবং আমি এখানে এলাম:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

আপনি '1' সামঞ্জস্য করে এটিকে উপরে বা নীচে নিয়ে যেতে পারেন। এটি পুনরায় আকার দেওয়ার আগে এবং পরে নববারের সামগ্রীর আকার নির্বিশেষে আমার পক্ষে কাজ করে বলে মনে হচ্ছে।

এই সম্পর্কে অন্যরা কী ভাববে আমি আগ্রহী: দয়া করে আপনার মতামতগুলি ভাগ করুন। (এটি পুনরুদ্ধার করা হবে না, বিটিডব্লিউ।) JQuery ব্যবহার করার পাশাপাশি, সমস্যাটি এভাবে না যাওয়ার জন্য অন্য কোনও কারণ রয়েছে কি? এমনকি আমি এটির মতো মাধ্যমিক নাবারের সাথে এটির কাজও করেছি:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: উপরের বুটস্ট্র্যাপ ২.৩.২-এ রয়েছে - জেনেরিক শ্রেণির নামগুলি যতক্ষণ থাকবে ... ততক্ষণ এটি কি 3.x এ কাজ করবে ... বাস্তবে, এটি বুটস্ট্র্যাপের থেকে স্বাধীনভাবে কাজ করা উচিত, তাই না?

সম্পাদনা: এখানে একটি সম্পূর্ণ jquery ফাংশন যা গতিশীল আকারের দুটি সজ্জিত, প্রতিক্রিয়াশীল ফিক্সড নববার পরিচালনা করে। এর জন্য 3 টি এইচটিএমএল ক্লাস প্রয়োজন (বা আইডির ব্যবহার করতে পারে): ব্যবহারকারী-শীর্ষ, অ্যাডমিন-শীর্ষ, এবং বিষয়বস্তু:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

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

@ লিয়ামডাউ হয়ত আপনার পৃষ্ঠায় একাধিক '.user-top' (উদাহরণস্বরূপ) থাকতে পারে, সেই ক্ষেত্রে। উচ্চতা () বিভ্রান্ত হতে পারে ...?
রায়ান 22

13

শুধু পরিবর্তন fixed-topসঙ্গে sticky-top। এইভাবে আপনাকে প্যাডিং গণনা করতে হবে না।
এবং এটি কাজ করে !!


4
বিএস 4 অনুসারে এটি সঠিক উত্তর হওয়া উচিত। +1
পেড্রো সউসা

11

মেনু-বারে মোড়ানোর রেখাগুলি পরিচালনা করার জন্য, নাবারটিতে একটি আইডি প্রয়োগ করুন:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

এবং jquery অন্তর্ভুক্ত করার পরে মাথায় এই ছোট স্ক্রিপ্ট যুক্ত করুন:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

এইভাবে, শরীরের শীর্ষ-প্যাডিং স্বয়ংক্রিয়ভাবে সামঞ্জস্য হয়।


আমাকে আপনার উদাহরণে উচ্চতার দ্বিতীয় রেফারেন্সটি $ ('# টপনাবার') হতে হবে height উচ্চতা () এবং তারপরে এটি আমার পক্ষে পুরোপুরি কাজ করেছে। ধন্যবাদ!
28th

1
মন্তব্যের জন্য ধন্যবাদ! আমি উত্তরে এটি স্থির করেছি।
অলিভার কোনিগ

এটিই সেরা সমাধান যা আমি পিসি, আইওএস, অ্যান্ড্রয়েড - সমস্ত ডিভাইসে কাজ করে। অন্য সমস্তগুলি হয় হার্ড-কোডড পিক্সেল মান বা খুব লম্বা এবং সমস্ত ডিভাইসগুলিতে কাজ করে না।
ওরাকুলার ম্যান

4

বুটস্ট্র্যাপ ৩. এর জন্য, আমি নেভিবার-ফিক্সড-টপ এবং অ্যাঙ্কর জাম্প ওভারল্যাপড ইস্যুটি https://github.com/twbs/bootstrap/issues/1768 এর উপর ভিত্তি করে ঠিক করতে নিম্নলিখিত সিএসএস ব্যবহার করব

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

একই সমস্যা, সুন্দর উত্তর।
ম্যাকগ্র্যাডি

2

নাভি ট্যাগের ভিতরে এই শ্রেণিটি ব্যবহার করুন

শ্রেণি = "নাভবার নাবার-প্রসারিত-এলজি নাবার-হালকা বিজি-লাইট স্টিকি-শীর্ষ "

বুটস্ট্র্যাপ 4 এর জন্য


আমি কখনই বুঝতে পারি না যে এটি কেন ডাউন ছিল, কারণ এটি আমার এবং অন্য সকলের জন্য কাজ করে working
কিংজিথনোর্থ

এটা সঠিক। ডকসগুলিতে কেবলমাত্র এটিই বলেছে যে "। স্টিকি-টপ ইউটিলিটি CSS এর অবস্থান ব্যবহার করেছে: স্টিকি, যা সমস্ত ব্রাউজারে পুরোপুরি সমর্থিত নয়"
জোসে


0

নিক বিসবির জবাব ছাড়াও, যদি আপনি রেলগুলিতে এইচএএমএল ব্যবহার করে এই সমস্যাটি পান এবং আপনি এখানে রবার্তো ব্যারোসের সমাধান প্রয়োগ করেছেন:

আমি "বুটস্ট্র্যাপ_এন্ড_ওভারাইডস সিএসএস" এর মধ্যে প্রয়োজনীয়গুলি প্রতিস্থাপন করেছি:

= টুইটার-বুটস্ট্র্যাপ-স্ট্যাটিক / বুটস্ট্র্যাপ.css.erb প্রয়োজন

( Https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 দেখুন )

... প্রয়োজনীয় বিবৃতি দেওয়ার আগে আপনাকে বডি সিএসএস লাগাতে হবে :

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

যদি প্রয়োজনীয় বিবৃতিটি বডি সিএসএসের আগে হয় তবে তা কার্যকর হবে না।


0

আমি এটি করব:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

এটি নিশ্চিত করা উচিত যে নাভ ব্লকটি ডাউনপেজটি প্রসারিত করে না এবং পৃষ্ঠার সামগ্রীটি কভার করে।


-4

আমি সবেমাত্র একটিতে নভবারটি জড়িয়েছি

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

কোনও অভিনব হোকস পোকস নয় তবে এটি কার্যকর হয়েছে ..


আপনার উত্তরটি অস্পষ্ট এবং সমস্যাটি সমাধান করতে ব্যর্থ। কি nav-? ??প্রতিনিধিত্ব করে?
ভঙ্গুর উইন্ডোজ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.