Tips for restricting navbar-fixed to the width of the container

Welcome to my first project utilizing Twitter Bootstrap.

While using Twitter Bootstrap, I've noticed that whether I use container-fluid or just container for my fixed top navbar, it expands to full width of the browser once it reaches around 980px. This behavior has been consistent in both Firefox and IE.

Any suggestions on how to address this issue?

Here is the code snippet:

Within the head section:

<link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">

Within the body section:

<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#"><i class="icon-home icon-white"></i></a>
<a class="brand" href="#">Time Machine: Lawrence, Kansas</a>
<ul class="nav pull-right">
<li class="divider-vertical"></li>  
<div class="btn-group pull-right">
  <a class="btn btn-inverse" href="#"><i class="icon-search icon-white"></i> Buildings</a>
  <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-search"></i> Blocks</a></li>
    <li class="active"><a href="#"><i class="icon-search"></i> Buildings test out long string</a></li>
    <li><a href="#"><i class="icon-search"></i> Businesses</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Contact Us</a></li>
  </ul>
  <a class="btn btn-inverse" href="#"><i class="icon-repeat icon-white"></i></a>
</div>
<li class="divider-vertical"></li>  
</ul> <!-- nav class -->

</div> <!-- navbar-inner -->
</div> <!-- navbar navbar-fixed-top -->

Answer №1

To activate the responsive design, it is recommended to remove the bootstrap-responsive.css file. This will allow all DIV elements to resize to 100% when the browser window is less than 979px in width.

<link href="assets/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">

If you still want to utilize the responsive features, you can achieve this by using CSS @media queries specifically targeting the navbar element. This code snippet should be placed in a separate CSS file or container and included after the bootstrap-responsive file.

@media (max-width: 979px) {

    .navbar { ... }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

Designing a search form to browse through the database by entering a specific title

I am currently working on designing a form to perform database searches for specific titles. However, I have encountered an issue where nothing happens when I try to search, possibly due to a problem with connecting to the database. The link to the appli ...

During the rendering process, the property "instance" was attempted to be accessed but is not defined

I am having trouble creating a Contact Us page using v-model. My code keeps throwing these errors: Property "inputted_name" was accessed during render but is not defined on instance Property "inputted_email" was accessed during render but is not defined o ...

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

retrieving data from a database to populate selection options using PHP

While working on our thesis, I encountered a challenge where I needed to transfer certain values from my SQL database to another part of the project. Below is a snippet of the sample code I was using: <tr> <td id="t" align="center"> ...

Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Creating a responsive layout with nested divs using Bootstrap Check out my HTML code below: <div class="container-fluid" style="height: 350px;"> <div class="row-fluid clearfix" style="height: 100%"> <div class="col-md-9 column" ...

Tips for changing the color of text in the navbar with Bootstrap 5

I am currently learning the basics of Bootstrap for front-end web development. However, I am facing difficulty in changing the color of navbar text items to blue. I have tried several online solutions but none seem to work with the following code: <n ...

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the most effective way to modify the default primary color for primeNG (saga-blue theme)? Altering --primary-color does not have the desired effect, as elements in node_modules/..../theme.css are styled using the main color hex rather than '-- ...

Calling JavascriptInterface in an H5 environment is not permitted

Utilizing the power of vue, I created an immersive h5 page within the application framework. The seamless connection between the page and the app relies on the use of window.JSInterface for communication. My current challenge lies in invoking the JSInterfa ...

Managing the vertical space within a nested accordion section

I've built a custom accordion component, but I'm encountering scrolling issues when trying to use nested levels within the accordion. I'd like to prevent scrolling inside the accordion section and instead have the page scroll below it. Any ...

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

What could be the reason behind ejs not allowing if else statements when the variable is undefined?

I am attempting to replicate a rather simple example from this question here <div <% if (page_name === 'overview') { %> class="menu__menu-overviewPage menu" <% } %> class="menu"> However, when I try it on a ...

Tips for displaying buttons and images on the same line using CSS

Below is the JavaScript code I am using: $('#needdiv').append('<img src="/images/Connect.png" id="connectimage">' + '</img>' + '<input type="button" id="connect" value=connect >' + '&l ...

Using AngularJS and ChartJS together for stellar data visualization

I need help displaying the canvas element within custom angular directives. Being new to AngularJS, I am in search of a demo or idea regarding Chart.js integration with AngularJS. Important: I specifically require a custom directive for chart display. T ...

Can you tell me about the feature called "Inspect Browser" box?

Can you identify the significance of this enigmatic purple box while inspecting elements in the browser's developer tools? It does not correspond to padding, margins, or borders, yet it seems to be occupying space within the designated div. [1]: http ...

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

Is this an effective and appropriate method for establishing media queries?

<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" /> <link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css" /& ...

Reset functionality for input selector is malfunctioning

My HTML code looks like this: <input type="number"> <br> <input type="number"> <br> <input type="number"> <br> <button>+</button> In my JS script, I have the following: $('input').on('c ...

Utilizing border-image property to showcase four dots in each corner of my div container

I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs. <tr *ngFor="let d of displayData"> < ...