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.