Click here to Skip to main content
15,936,362 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using BootStrap 4 and trying to make a nav-item have the same height as my navbar so that when I add background-color to it it looks like a stripe through the nav-bar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">

</head>
<body>

 



    
<nav class="navbar navbar-dark bg-dark text-center">
    <div class="container">
        
        
        
        <div class="mr-auto order-0" class= "d-flex align-items-stretch">
            
            
        
             
            <a class="navbar-brand ml-auto" style="background-color:red; line-height: 58px; margin-top:-9px; padding: 0 20px 0 20px;" class="nav-item active" href="#">Matthew Krebs</a>
           
        </div>
        <a class="navbar-brand text-center" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto mx-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>




</body>
</html>


What I have tried:

Initially the item was centered and left space on top and below. I added negative margin to get it up against the top but the same didn't work when I tried to add "margin-bottom"

I then tried fixing the height of the navbar but when I did that and clicked on the toggle to bring down the navbar items they didn't show up because the fixed height prevented it from appearing.
Posted
Updated 9-Mar-20 7:01am
v2

1 solution

I can't understand your question but i feel you want remove the top and bottom spaces in bootstrap '
.navbar
' have padding top and bottom if you removed means the top and bottom will removed
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900