Padding with adjustments on a Bootstrap 4 navbar menu system

Question

New to Bootstrap 4 and making a dummy/mockup page with a header to get use to the navbar system.

I created this jsFiddle (full code) here, but the gist of my page is:

index.html

main.css

html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

.navbar {
    background-color: #00142e;
}

.red-button {
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;
}

.mainlogo {
    width: 35%;
}

When this runs I get:

The main problem here is the thickness of the padding around the navbar. How do I make it so that there is no padding, and that the height of the navbar is either the same as that of the logo and menu links, or at most just a pixel or two greater than? I did try adding padding: 0px; to the navbar style but that did not affect anything.

Also I would like to center all the navbar content (logo + menu items)...any ideas there? I did try adding d-flex justify-content-center to navbar-collapse but that also did nothing. Thanks in advance!

Update

I updated my jsFiddle with the suggested changes from below and now I'm seeing:

So I'm still not seeing the navbar (again: logo + links) content centered and I'm seeing undesired padding, meaning the blue bar is a little too tall for what I'm looking for (I want something shorter and hugging the logo + links a little tighter).

user_14107726 · Answer

To fix the centering, add align-item: center to your unordered list. That should be the child element of your navbar-collapse element, and it will center all your links vertically.

As for the padding, I think that it would be better to remove class="img-fluid mainlogo" alt="Responsive image" and instead just give your image a height property that you like. When I did just that, it also looked like it fixed your centering problem as well.

Let me know if that worked for you!

edited to add code snippet

/*old selector for mainlogo*/
.mainlogo {
    width: 35%;
}

/*new selector for mainlogo*/
.mainlogo {
    height: 50px;
}

/*added selector. targets ul elements that are descendents of element with id "navb"*/
#navb ul {
  align-items: center;
}

Navbar after changes

user_12668692 · Answer

I forked your work in JSFiddle, see what I did.
In fact, I wrapped your

whithin an

, then I have added the bootstrap class container to get the content centered depending on the screen size with media-queries.
Also, I have changed your content class container-fluid to container in order to have the same sizing results between the navbar and the rest of your page.
I removed the img-fluid on your image, in order to avoid stretching the image if the page is resized.

Also, as your question in an other post where I answered, I have changed the navbar background to fit your brand-logo background color ;)
And in bonus I added the class navbar-dark, now you can see your burger menu when nav items are collapse. Because since bootstrap 4 :

.navbar-default is now .navbar-light, though .navbar-dark remains the same. One of these is required on each navbar. However, these classes no longer set background-colors; instead they essentially only affect color.

Bonus 2 : I removed your red-button class, and changed it to btn btn-danger which is quite the same, but with hover rules. And for your sign-up button, I added btn btn-success. I did that to let you learn on those classes too, because it is not necessary to reinvent the wheel :)

Then, you can use in your questions / answers in StackOverflow, the built-in JSFiddle Javascript/HTML/CSS snippet CTRL-M as below :

html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

header#nav-container{
  background-color: #001a31;
}


#navb ul {
    align-items: center;
}

.mainlogo {
    height: 50px;
}



  

    Special Nonprofit

    
    

    

    

    

  
  
  
  
    
    
      
        
      
      

      
        
          
            
              About
            
          
          
            
              Fizz
            
          
          
            
              Buzz
            
          
          
            
              Foobar
            
          
          
            
              Resources
            
          
          
            
              Help
            
          
          
            WATCH DEMO
          
          
            Sign In
          
          
            Sign Up
          
        
      
    
    

    
      My First Bootstrap Page
      This is some text.

user_14671151 · Answer

Try This!

 .sidebar { 
            height: 100%; 
            width: 0; 
            position: fixed; 
            /*Stays in place */ 
            background-color: #303630; 
            /*Grey*/ 
            overflow-x: hidden; 
      color:white;
      z-index: 12;
            /*for Disabling horizontal scroll */ 
        } 
        /* Position and style for the sidebar links */ 
        
        .sidebar a { 
            padding: 10px 10px 10px; 
            font-size: 25px; 
            color: #ffffff; 
            display: block; 
            transition: 0.3s; 
        } 
        /* the links change color when mouse hovers upon them*/ 
        
        .sidebar a:hover { 
            color: #ffffff; 
        } 
        /* Position and style the for cross button */ 
        
        .sidebar .closebtn { 
            position: absolute; 
            top: 0; 
            right: 25px; 
        } 
        /* Style for the sidebar button */ 
        
        .openbtn { 
            font-size: 25px; 
            background-color: #000000; 
            color: #ffffff; 
            padding: 10px 10px 10px; 
            border: none;
      position: fixed;
      z-index: 12;
        } 
        /* the sidebar button changes 
    color when mouse hovers upon it */ 
.openbtn:hover { 
color: #FFFFFF; 
} 

    /* pushes the page content to the right 
    when you open the side navigation */ 
        
        #main { 
            transition: margin-left .5s; 
            /* If you want a transition effect */ 
            padding: 10px; 
        }



×


Placeholder 1
Placeholder 2
Placeholder 3
Placeholder 4
Placeholder 5
Placeholder 6

user_13527694 · Answer

I have moved all the navbar content to the center with mx-auto class. removed the padding for top and bottom with py-0 class. this equal to padding-top: 0; padding-bottom: 0; then with media queries. I'm switching between main and secondary logo.

Here's the code:

https://codepen.io/lachiweb/pen/dyXBGvd

Here's the code:

https://codepen.io/lachiweb/pen/dyXBGvd

Padding with adjustments on a Bootstrap 4 navbar menu system

Update

4 Answers