Databases
StackOverflow2013
Postsdbo
POBootstrap 3 topnav that turns into sidebar when in small screens?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap 3 topnav that turns into sidebar when in small screens?
    primarykey
    data
    text
    <p>I'm relatively experienced with Bootstrap 2, and can usually get it to do what I want, but I'm having an issue with Bootstrap 3.</p> <p>I'm trying to have a top nav across the page, and a secondary top nav underneath it. The secondary top nav, when the screen is big enough, should pop over to be a sidebar.</p> <p>I'm pretty stuck, and don't know where to go from <a href="http://getbootstrap.com/examples/offcanvas/" rel="nofollow">http://getbootstrap.com/examples/offcanvas/</a>.</p> <p>Thanks!</p> <p>EDIT: This is what I have. It shows the idea, but the nav is defined twice. Take a look, you'll see what I mean. <a href="http://jsfiddle.net/xwp7S/2/" rel="nofollow">http://jsfiddle.net/xwp7S/2/</a></p> <p>I have the sidebar defined as:</p> <pre><code> &lt;div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"&gt; &lt;div class="well sidebar-nav"&gt; &lt;ul class="nav"&gt; &lt;li&gt;Sidebar&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link 7&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--/.well --&gt; &lt;/div&gt; </code></pre> <p>and the top nav defined as</p> <pre><code>&lt;div class="navbar navbar-fixed-top navbar-inverse" role="navigation"&gt; &lt;div class="container"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".topnav-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt; &lt;/div&gt; &lt;div class="collapse navbar-collapse topnav-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /.nav-collapse --&gt; &lt;/div&gt; &lt;!-- /.container --&gt; &lt;/div&gt; </code></pre> <p>and extra css of</p> <pre><code> @media screen and (max-width: 768px) { #sidebar { display: none; } } @media screen and (min-width: 768px) { #topsidebar { display: none; } } </code></pre> <p>How do I approach the problem of not defining the nav twice?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UScreimers
    1. USAdam Wolf
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POBootstrap 3 topnav that turns into sidebar when in small screens?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you post what you've got so far for html?
      singulars
      1. POBootstrap 3 topnav that turns into sidebar when in small screens?
      1. USMark S
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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