Bootstrap Padding Issue

Bob Schneider
Bob Schneider used Ask the Experts™
on
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Guru
Most Valuable Expert 2011
Commented:
The element:
<a class="navbar-brand text-light" href="#">&nbsp;</a>

Open in new window

is displaying on its own line in the case where there's more empty space showing.  See the screenshot.

Perhaps hide that element, since it doesn't appear to show anything anyway?

a.navbar-brand.text-light {
    display: none;
}

Open in new window

ee-nav.jpg
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The difference is that the first link has more <li> elements that are wrapping. Because you are using a flex layout the <a> is now a flex item with the navbarNav but the <ul> items in the navbarNav are wrapping which is pushing the navbarNav below the <a> - it cannot fit on one line. In the second link there are not as many <li> items so the two can fit on the same line.

So what you need to do is tell flex you don't want your items to wrap.
Recap
<nav => DISPLAY Flex>
   <a [brand] FLEX ITEM 1>
    <div navbarNav FLEX ITEM 2>
           <ul>
           </ul>
    </div>
</nav>

Open in new window

We want FLEX ITEM 1 and FLEX ITEM 2 on the same line - so we tell the <nav> don't wrap
.navbar {
	flex-wrap: nowrap;
}

Open in new window

The navbar-brand class is expecting to have a logo so it add some height.
If you do no plan to have a logo you can simply remove the class
or simply remove this href  if you don't plan to use it
<a class="navbar-brand text-light" href="#">&nbsp;</a> 

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial