Databases
StackOverflow2013
Postsdbo
POFixed Bootstrap navbar to top of dynamic width DIV - not full width of page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed Bootstrap navbar to top of dynamic width DIV - not full width of page
    text
    copied!<h2>My problem</h2> <p>I am using Bootstrap 3.0 and need to use a fixed navbar, which will stay at the top of a DIV on the left side and NOT extend all the way 100% of the width of the window (like I usually see Bootstrap's example do). I have some very simple code below, using ASP.NET MVC 4 which will explain the RenderSection areas. </p> <p>I have included an image which shows what I am trying to do. Currently the navbar is only extending about 75% of the left side container, not the full 100% of that left side container like I want it to.</p> <p>Like I said above, I want the navbar to be fixed so when you scroll it stays in one spot within that left DIV.</p> <p>Any tips/hints would be greatly appreciated! Thanks!</p> <p>I also saw this question (<a href="https://stackoverflow.com/questions/12571540/navbar-fixed-to-top-but-not-full-width">Navbar fixed to top but not full-width</a>) but I do not want to have to dynamically maintain this navbar with a fixed pixel width in media queries. I'd prefer it to fill out the entire left side DIV that contains it. </p> <p><img src="https://i.imgur.com/YLzmkHp.jpg" alt="image which outline my issue(s)"> (<strong><a href="https://i.imgur.com/YLzmkHp.jpg" rel="nofollow noreferrer">http://i.imgur.com/YLzmkHp.jpg</a></strong>)</p> <h2>My code</h2> <pre><code>&lt;div class="container"&gt; &lt;div class="row"&gt; &lt;!--LEFT SIDE--&gt; &lt;div class="col-md-9"&gt; &lt;div data-spy="affix" data-offset-top="0"&gt; &lt;nav class="navbar navbar-default" role="navigation"&gt; &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li class="dropdown"&gt; &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul role="menu" class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;form role="search" class="navbar-form navbar-left"&gt; &lt;div class="form-group"&gt; &lt;input type="text" placeholder="Search" class="form-control"&gt; &lt;/div&gt; &lt;button class="btn btn-default" type="submit"&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/nav&gt; &lt;/div&gt; &lt;!--end data-spy=affix--&gt; &lt;!--the LeftSide below just contains basic placeholder text in a &lt;p&gt; tag--&gt; @RenderSection("LeftSide", true) &lt;/div&gt; &lt;!--RIGHT SIDE--&gt; &lt;div class="col-md-3"&gt; &lt;!--the RightSide below just contains basic placeholder text in a &lt;p&gt; tag--&gt; @RenderSection("RightSide", true) &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h1>Partially Solved (update)</h1> <p>I was able to solve my main problem that I listed above by using this bit of jQuery</p> <pre><code> $(window).resize(function () { var w = $("#leftSide").width(); $("#navWrapper").css("width", w); }); </code></pre> <p>But this does <strong>not</strong> work within an iFrame. </p> <p>If anyone has any insights on solving this for use in an iFrame, it'd be greatly appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload