navbar-fixed-top

से पहले हेडर छवि जोड़ना मैं हेडर छवि कैसे जोड़ूं ताकि यह एक navbar-fixed-top के शीर्ष पर दिखाई दे। और जैसे ही उपयोगकर्ता नेबरबार को स्क्रॉल किया है, शीर्ष पर चिपकेगा?navbar-fixed-top

मैंने इसे एक कंटेनर में जोड़ने का प्रयास किया है लेकिन यह अपेक्षा के अनुसार काम नहीं करता है।

यहां मेरा कोड अभी तक है।

<body> 
<header> 
    <img src="header/1024x100.png"> 
</header> 
<div class="container-fluid"> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#"></a> 
     <div class="nav-collapse collapse"> 
     <p class="navbar-text pull-right"> 
      Logged in as <a href="#" class="navbar-link">Username</a> 
     </p> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

धन्यवाद।

स्रोत

2013-02-27 John Doe

क्या आप हमें कुछ कोड या एक परीक्षण पृष्ठ दिखा सकते हैं? – Shail

कृपया समाधान की जांच करें। – Shail

स्क्रॉल एनएवी check link

नोट के साथ JsFiddle: बैठाना अपनी छवि को स्क्रीन आकार से छोटा होता है, अपने सीएसएस

.masthead img{ 
width:100%; 
}

अंदर इस स्निपेट डाल दें एचटीएमएल ऐसा दिखाई देगा:

<div class="masthead"> 
<img src="http://placehold.it/940x150"/> 
</div> 
<!-- /container --> 
<div class="navbar affix-top" data-spy="affix" data-offset-top="150"> 
<div class="navbar-inner"> 
    <div class="container"> 
       <ul class="nav"> 
     <li class="active"><a href="#">Home</a> 

     </li> 
     <li><a href="#">Link</a> 

     </li> 
     <li><a href="#">Link</a> 

     </li> 
    </ul> 
    </div> 
    </div> 
</div> 
<!-- navbar --> 
<div class="container"> 
    <div class="row-fluid"> 
    <div class="span4"> 
    content goes here 
    </div> 
    </div> 
</div>

स्रोत

2013-02-27 07:34:50 Shail

हाय @ शेल, यह वास्तव में चिकनी स्क्रॉलिंग नहीं है। –

@ जोहान डू बडी आपने इसके लिए नहीं पूछा था। आपके मूल अनुरोध के अनुसार आप नेविगेशन के शीर्ष पर शीर्षलेख छवि रखना चाहते थे। और मुझे लगता है कि मेरा समाधान ऐसा करता है, है ना? स्क्रॉलिंग के बारे में .. आपको jquery – Shail

जोड़कर चिकनी स्क्रॉल मिलती है @ जॉन डी मुझे बताएं अगर आपको और मदद की ज़रूरत है – Shail

navbar-fixed-top

उत्तर

संबंधित मुद्दे