reducing height nav bar bootstrap

[Laurent0311]

i need help to resize the nav bar and make it smaller

<style> body, html { height: 100%; margin: 0; } /* .navbar-collapse { background-color :#EBDCC1; } */ /* .navbar-brand { background-color :#EBDCC1; } */ /* This class is already present in Bootstrap navbar. No need to add maually * .navbar-toggler {*/ * { box-sizing: border-box; } .bg-image { /* Full height */ height: 50%; opacity: 0.65; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } /* Images used */ .img1 { background-image: url("https://media.istockphoto.com/photos/funny-group-of-dogs-at-the-hairdressers-or-groomer-picture-id538165049?k=6&m=538165049&s=612x612&w=0&h=WJxP1JGgZbtjIMc3Rhh_UGCKVqLXXBA-IOvWSeA6y5I="); } .img2 { background-image: url("https://media.istockphoto.com/photos/yorkshire-terrier-is-being-brushed-by-groomer-picture-id495016554?k=6&m=495016554&s=612x612&w=0&h=IG6Gj9J0IohJNBpQhJ3E_Xa4MUrbSvVNYijxUrB9JVE="); } .img3 { background-image: url("https://media.istockphoto.com/photos/cavalier-king-charles-spaniel-dog-grooming-session-picture-id969097426?k=6&m=969097426&s=612x612&w=0&h=9bcejS4bWtxu3zPpiXSa2QKm51hJZr3Wj45u85GmYs4="); } .img4 { background-image: url("https://media.istockphoto.com/photos/young-cute-happy-little-white-dog-is-having-his-fur-on-paws-trimmed-picture-id944942222?k=6&m=944942222&s=612x612&w=0&h=VQBv3FjBcJl43277nipvpd3LC3a6ZhdBGaFv_WFajH0="); } .img5 { background-image: url("https://media.istockphoto.com/photos/yorkie-dog-and-teddy-bear-friend-at-the-beauty-salon-picture-id505524522?k=6&m=505524522&s=612x612&w=0&h=40PebI5kG1nRIbBSEp4oRvJ-v84E-Rb0LxMrEFVarkM="); } .img6 { background-image: url("https://media.istockphoto.com/photos/pet-groomer-with-scissors-makes-grooming-dog-picture-id1065436826?k=6&m=1065436826&s=612x612&w=0&h=2ASzFmXzz_AFt7Wq9LP_xetxLoLJj0vPgDwR7_iY9SQ="); } /* banniere */ .bg-text { background-color:#EBDCC1; / Fallbac color background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */ color: withe ; font-size: 14px; position: fixed; top: 80%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 350px; height: 160px; padding: 2px; text-align: center; font-family: 'proxima-nova'; } .caption { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; color: #EBDCC1; } .caption span.border { background-color: #111; color: #fff; padding: 18px; font-size: 25px; letter-spacing: 10px; } IMG.displayed { background-color: #EBDCC1 (0,0,, 0.4); /* Black w/opacity/see-through */ position: fixed; top: 30%; left: 80%; transform: translate(-50%, -50%); width: 600px; height: 160px; padding: 20px; display: block; margin-left: auto; margin-right: auto } /* logo */ IMG.displayed { scroll-margin-left: 50px; padding: 16px; font-size: 20px; width: 400px; height: 400px; text-align: center; text-decoration: none; border-radius: 50%; } body { margin: 0; font-family:'proxima-nova'; bold; } /* .logo_superpose img { position:absolute; } */ /* header { background-color: #EBDCC1; } */ /* .navbar-toggler { background: rgba(235, 220, 193, 1) !important; z-index: 2; backdrop-filter: blur(10px) saturate(125%); -webkit-backdrop-filter: blur(10px) saturate(125%); } */ /* @media screen and (min-width: 992px) { .navbar { min-height: 50px; } */ .navbar-custom { background-color: #ff5500; } /* #logo { width: 260px; height: 120px; position: relative; } .navbar { min-height: 5rem; max-height:5rem; height:5rem; } #nav-left { padding-left: 30px; } /* reseau sociau */ .fa { padding: 10px; font-size: 20px; width: 30px; text-align: center; text-decoration: none; margin: 2px 1px; border-radius: 50%; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #EBDCC1; color: white; } .fa-instagram { background: #EBDCC1; color: white; } .content img { margin: 3px; width: 300px; height:300px; float:right; } </style>

​

• Partenaires
• Services
• Tarifs

</ul>

<div class="slider">
</div> 
<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>



<div class="bg-text">

Place de l'eglise
1110 Morges

+41784164046

[email protected]

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

            <nav class="navbar navbar-expand-lg "  style="background-color: #EBDCC1 ; ">
              
                <a class="navbar-brand text-dark" href="#">Flair & Co</a>
                
                <div class="collapse navbar-collapse">
                   
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link active text-dark" href="#">Nos petits artisans </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link active text-dark" href="#">Nos tarifs</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link active text-dark" href="#">Nos services</a>
                        </li>
                        
                    </ul>
                </div>
            </nav>
        </div>
    </div>
   
</main>
[

](url)

[patrickhlauke]

@Laurent0311 can you please stop filing issues that are essentially you asking for help with how to use bootstrap? That's not the purpose of github issues, which are about filing bugs/feature requests.