When the @gridGutterWidth(s) is set to 0px for a flush grid in Bootstrap, the navbar's 'a.brand' breaks onto its

Big shoutout to the amazing StackOverflow community for helping me eradicate countless bugs before they even surfaced. Your crowd sourcing powers are truly magical.

I'm in the process of building a website using the Wordpress Roots theme, which is based on HTMl5 Boilerplate and Bootstrap. I've been utilizing some aspects of Bootstrap while tweaking others, diving into custom CSS, and more.

However, I've encountered an issue with the responsive navbar from Bootstrap. I'm designing a page that includes a fluid grid section, and since all sections seamlessly flow in this scrollable design, I want to eliminate all gutters from the Bootstrap grid. To achieve this, I've set the GutterWidths to 0px in variables.less as shown below and then compiled it with simpLESS:

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         0px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// More variables setting here...

Although adjusting the grid system should not impact the navbar, the logo (a.brand) seems to be breaking onto its own line above the links. You can see the issue here:

It appears that somewhere in the complexity of LESS, these gutter values are influencing some navbar layout elements that I'm struggling to identify using FF web dev tools.

There's nothing out of the ordinary happening on the Wordpress side. Here's an excerpt from the navbar:

  <header class="banner navbar navbar-static-top navbar-inverse" role="banner">
  // Navbar code goes here...
</header>

In addition, here's a snippet of the Navbar CSS:

.banner { }

.navbar .nav {
    font-size: 18px;
}

// More CSS properties go here...

Followed by the Grid section:

<section class="container-fluid scroll-section" id="case-studies-portfolio">
    // Grid elements and content...
</section>

And lastly, the Grid CSS styles:

#case-studies-portfolio {
    position: relative;
    z-index: 4;
}

.portfolio-cell {
    // Styles for portfolio cells...
}

In summary, I'm also aiming to make the grid cells full height regardless of their content. While overriding this in my CSS could be a solution, considering I only use the grid on one page currently and don't plan on needing the same padding elsewhere, I wanted to address this issue early on to minimize code redundancy.

I hope any suggestions provided here will benefit anyone seeking to utilize the Bootstrap grid for seamless layouts without disrupting their navbar. Thank you in advance for your assistance.

Note: Since this is a live development site, the mentioned problem may not be visible on the linked page due to ongoing modifications. Unfortunately, StackOverflow does not allow image uploads at this time.

Answer №1

I personally think that the gutter is included by .row when you typically insert spans. I have previously applied negative left margin values to .row or .row-fluid, and it appeared to be effective. However, I am unsure about whether this approach is advisable for compilation purposes, so it might be better to simply overwrite it with a separate stylesheet.

.row {
    margin-left: -20px;
}

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

When my contact form is viewed on mobile, an unexpected margin appears

On my main page, I have a contact form positioned on top of an image slider that appears like this: https://i.sstatic.net/aGnj1.png The contact form is nested inside the slider's div as shown below: <div class="img-slide"> <div c ...

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

Injecting services differently in specific scenarios in AngularJS

I have a unique angular service called $superService that I utilize across many of my directives and controllers. However, there is one specific directive where I want to implement the following behavior: If another directive utilizes $superService in its ...

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu ...

When the jquery loop fails to function

I need to dynamically add a class to a specific tag using jQuery depending on an if condition. Here's the code snippet: if ($(".asp:contains('Home')")) { $("ul.nav-pills a:contains('Home')"). parent().addClass('active ...

Two Mistakes Found in the Dropdown Menu

Can anyone assist me with two errors I am encountering in my "Drop Down Menu"? Error 1: Whenever I hover towards the right direction in the sub-menu (e.g., Portfolio 2), a black box appears. This issue does not occur when hovering above the text (e.g., P ...

The styling options for PHP table are limited

I have been assigned a task for homework that involves connecting a MySQL database to our PHP files and displaying the data in an HTML table. Although I have successfully connected to the database, I am facing difficulties styling the table. All other elem ...

Images within links appear with blue lines underneath them

Currently, I am in the process of adding links to a footer by using <img> tags with SVG images. However, I am encountering an issue where there are small blue lines under the icons. After searching online, it seems that you need to add this CSS code: ...

Prevent the button from being enabled until the file input is updated

I want to create a form with an input file for uploading photos, but I need the submit button to be disabled until the input file has a value. Additionally, there are other validations that will also disable the button. Here is the structure of my HTML fi ...

Using relative positioning in CSS causes the div to move to a new line

Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...

Dynamic HTML DOM element name changes

One thing I'm considering is the process of dynamically changing element names in the DOM with JavaScript or jQuery when adding or removing child elements. For instance, if I decide to delete the second text box from a form that originally has three t ...

Utilizing ReactStrap: a guide to retrieving the id of the chosen dropDownItem

In my code, I have a dropdownList component with various DropdownItems: <Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => { this.toggle(3); }} > <DropdownToggle className="my-dropdown" car ...

Toggle between bold and original font styles with Javascript buttons

I am looking to create a button that toggles the text in a text area between bold and its previous state. This button should be able to switch back and forth with one click. function toggleTextBold() { var isBold = false; if (isBold) { // Code t ...

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

What is causing the TouchSwipe jQuery plugin not to function in my code?

I have integrated the TouchSwipe jQuery plugin into my code to detect mouse movement and display the number of pixels moved when swiping left or right. To download the TouchSwipe jQuery plugin, I visited this link: TouchSwipe and then proceeded to use it ...

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

Tap to navigate to queued sections on click

Greetings, community members! Despite my extensive research, I have been unable to find a solution to my query. Just a heads up - I am a novice when it comes to javascript and jQuery. My question pertains to incorporating two image buttons that, upon cli ...

Two entities positioned on opposite extremes

Is there a way to design a div with two elements (text and image) positioned on opposite sides? The length of the text varies as it's a list of months for selection. Ideally, the text should appear on the left side of the div as a "p" element, while t ...