Databases
StackOverflow2013
Postsdbo
POChange Bootstrap 3.0 Navbar default resize to custom resize
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange Bootstrap 3.0 Navbar default resize to custom resize
    primarykey
    data
    text
    <p>I am trying to make a dynamic mobile website which adjusts depending on screen size.</p> <p>Here is what the navbar does at the moment:</p> <p>At 766px width: <img src="https://i.stack.imgur.com/5EqrH.png" alt="enter image description here"></p> <p>768px width: <img src="https://i.stack.imgur.com/DvG0l.png" alt="enter image description here"></p> <p>990px width: <img src="https://i.stack.imgur.com/Jzikk.png" alt="enter image description here"></p> <p>992px width: <img src="https://i.stack.imgur.com/ojMlw.png" alt="enter image description here"></p> <p>I basically want to cut out the 768 - 990px stage as it doesn't look very good!</p> <p>I have inspected the element and found this code in the bootstrap default css this appears at the screen width of 768px:</p> <pre><code>media="screen" @media (min-width: 768px) .container&gt;.navbar-header, .container&gt;.navbar-collapse { margin-right: 0; margin-left: 0; } </code></pre> <p>I have tried changing <code>min-width</code> to <code>992px</code>, but that doesnt seem to do anything.</p> <p>Here is my code for the navbar:</p> <pre><code> &lt;nav class="navbar navbar-default" 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=".navbar-ex1-collapse"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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="index.html"&gt;Welsh for Adults&lt;/a&gt; &lt;/div&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="index.html"&gt;&lt;span class="glyphicon glyphicon-home" style="font-size:85%;"&gt;&lt;/span&gt; Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="taster.html"&gt;Welsh Taster Course&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="courses.html"&gt;Courses&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="activities.html"&gt;Informal Learning Activities&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav navbar-nav navbar-right"&gt; &lt;li&gt;&lt;button type="button" class="btn btn-danger navbar-btn change-lang" data-lang="cym"&gt;Cymraeg&lt;/button&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USsmj2393
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI have noticed it does the same thing on the bootstrap template http://getbootstrap.com/components/#navbar (try resizing the page slowly and the layout messes up... must be a bug within bootstrap.
      singulars
      1. POChange Bootstrap 3.0 Navbar default resize to custom resize
      1. USsmj2393
    2. COIt's not a bug. The breakpoint on the bootstrap.css is 768px. You can use the customizer to adjust that globally OR you can adjust the less files globally or you can create a new variable that adjusts it where you want. There's many places.
      singulars
      1. POChange Bootstrap 3.0 Navbar default resize to custom resize
      1. USChristina
 

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