css 如何从导航栏中删除顶部和底部填充

我想删除顶部和底部的填充从我的导航栏，所以它可以去寻找similar to the navbar from Wix.com
我今天花了大部分时间试图解决这个问题，我试图从导航栏中删除填充！important。尝试py-0。尝试从导航栏的子容器中删除填充。
我很感激任何方向。

* {
  font-family: 'Wix Madefor Text', sans-serif;
  font-family: 'Wix Madefor Display', sans-serif;
  
}

/* Global Font Size */
html {
  font-size: 16px;
}

/* Navbar */
.navbar-custom {
  height: 60px;
}

/* Small Font */
.sm-font-size {
  font-size: 11px !important;
}

/* Medium Font */
.md-font-size {
  font-size: 20px !important;
}

/* Divider */
.divider {
  align-self: center;
  border-right: 1px solid hsl(240, 3%, 73%);
  display: inline-flex;
  height: 15px;
}

/* Colors */
.btn:first-of-type {
  background-color: hsl(216, 83%, 50%) !important;
}

/* Hover Effects*/
.hover-link:hover {
  color: hsl(225, 73%, 57%) !important;
}

/* Hover Effects*/
.btn:first-of-type:hover {
  background-color:hsl(216, 89%, 57%) !important;
}

/* Banner */
.banner {
  background-color: hsl(230, 54%, 35%);
  font-size: 14px;
  margin: 60px 0 0 0;
}

<nav class="navbar navbar-expand-sm py-0 navbar-custom fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img class="pt-0" src="https://management.org/wp-content/uploads/2022/01/Wix-logo-150x150.jpg" alt="Wix Logo" width="45px" height="50px">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto justify-content-start sm-font-size">
                    <li class="nav-item dropdown pr-2">
                        <a class="nav-link text-black hover-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Creation
                            <svg xmlns="http://www.w3.org/2000/svg" height="9" width="12" viewBox="6 6 12 12">
                                <path d="M7 9.79a.5.5 0 0 1 .854-.353L12 13.584l4.146-4.147a.5.5 0 1 1 .708.708L12 14.998l-4.854-4.853A.5.5 0 0 1 7 9.79Z" class=""></path>
                            </svg>
                        </a>
                        <ul class="dropdown-menu">
                            <a class="dropdown-item" href="#">Website Design</a>
                            <a class="dropdown-item" href="#">Website Templates</a>
                            <a class="dropdown-item" href="#">Advanced Web</a>
                            <a class="dropdown-item" href="#">Editor X</a>
                            <a class="dropdown-item" href="#">Mobile App</a>
                            <a class="dropdown-item" href="#">Hire a Professional</a>
                        </ul>
                    </li>
                    <li class="nav-item dropdown px-2">
                        <a class="nav-link text-black hover-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Growth
                            <svg xmlns="http://www.w3.org/2000/svg" height="9" width="12" viewBox="6 6 12 12">
                                <path d="M7 9.79a.5.5 0 0 1 .854-.353L12 13.584l4.146-4.147a.5.5 0 1 1 .708.708L12 14.998l-4.854-4.853A.5.5 0 0 1 7 9.79Z" class=""></path>
                            </svg>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Email Marketing</a>
                            <a class="dropdown-item" href="#">Social Posts</a>
                            <a class="dropdown-item" href="#">Facebook Ads</a>
                            <a class="dropdown-item" href="#">Client Management</a>
                        </ul>
                    </li>
                    <li class="nav-item dropdown px-2">
                        <a class="nav-link text-black hover-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Resources
                            <svg xmlns="http://www.w3.org/2000/svg" height="9" width="12" viewBox="6 6 12 12">
                                <path d="M7 9.79a.5.5 0 0 1 .854-.353L12 13.584l4.146-4.147a.5.5 0 1 1 .708.708L12 14.998l-4.854-4.853A.5.5 0 0 1 7 9.79Z" class=""></path>
                            </svg>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">All Tools & Features</a>
                            <a class="dropdown-item" href="#">Web Design Inspiration</a>
                            <a class="dropdown-item" href="#">Wix Learn</a>
                            <a class="dropdown-item" href="#">Wix Blog</a>
                        </ul>
                    </li>
                    <li class="nav-item dropdown divider px-2">
                    </li>
                    <li class="nav-item dropdown px-3">
                        <a class="nav-link text-black hover-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            More
                            <svg xmlns="http://www.w3.org/2000/svg" height="9" width="12" viewBox="6 6 12 12">
                                <path d="M7 9.79a.5.5 0 0 1 .854-.353L12 13.584l4.146-4.147a.5.5 0 1 1 .708.708L12 14.998l-4.854-4.853A.5.5 0 0 1 7 9.79Z" class=""></path>
                            </svg>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Enterprise</a>
                            <a class="dropdown-item" href="#">Pricing</a>
                            <a class="dropdown-item" href="#">Wix Learn</a>
                        </ul>
                    </li>
                </ul>
            </div>
            <div>
                <svg  class="divider text-black hover-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="50" height="200">
                    <path d="M4.42676427,15 L7.19778729,15 C7.069206,14.209578 7,13.3700549 7,12.5 C7,11.6299451 7.069206,10.790422 7.19778729,10 L4.42676427,10 C4.15038555,10.7819473 4,11.6234114 4,12.5 C4,13.3765886 4.15038555,14.2180527 4.42676427,15 Z M4.86504659,16 C5.7403587,17.6558985 7.21741102,18.9446239 9.0050441,19.5750165 C8.30729857,18.6953657 7.74701714,17.4572396 7.39797964,16 L4.86504659,16 Z M18.5732357,15 C18.8496144,14.2180527 19,13.3765886 19,12.5 C19,11.6234114 18.8496144,10.7819473 18.5732357,10 L15.8022127,10 C15.930794,10.790422 16,11.6299451 16,12.5 C16,13.3700549 15.930794,14.209578 15.8022127,15 L18.5732357,15 Z M18.1349534,16 L15.6020204,16 C15.2529829,17.4572396 14.6927014,18.6953657 13.9949559,19.5750165 C15.782589,18.9446239 17.2596413,17.6558985 18.1349534,16 Z M8.21230689,15 L14.7876931,15 C14.9240019,14.2216581 15,13.3811544 15,12.5 C15,11.6188456 14.9240019,10.7783419 14.7876931,10 L8.21230689,10 C8.07599807,10.7783419 8,11.6188456 8,12.5 C8,13.3811544 8.07599807,14.2216581 8.21230689,15 Z M8.42865778,16 C9.05255412,18.3998027 10.270949,20 11.5,20 C12.729051,20 13.9474459,18.3998027 14.5713422,16 L8.42865778,16 Z M4.86504659,9 L7.39797964,9 C7.74701714,7.54276045 8.30729857,6.30463431 9.0050441,5.42498347 C7.21741102,6.05537614 5.7403587,7.34410146 4.86504659,9 Z M18.1349534,9 C17.2596413,7.34410146 15.782589,6.05537614 13.9949559,5.42498347 C14.6927014,6.30463431 15.2529829,7.54276045 15.6020204,9 L18.1349534,9 Z M8.42865778,9 L14.5713422,9 C13.9474459,6.60019727 12.729051,5 11.5,5 C10.270949,5 9.05255412,6.60019727 8.42865778,9 Z M11.5,21 C6.80557963,21 3,17.1944204 3,12.5 C3,7.80557963 6.80557963,4 11.5,4 C16.1944204,4 20,7.80557963 20,12.5 C20,17.1944204 16.1944204,21 11.5,21 Z"></path>
                </svg>
                <a class="mx-2 text-black link-body-emphasis sm-font-size hover-link" href="#">Log In</a>
                <button type="button" class="btn btn-primary rounded-5 mx-2 px-3 py-1 sm-font-size text-white">Get Started</button>
            </div>
        </div>
    </nav>
    <div class="container-fluid banner py-2 text-center text-light ">

css 如何从导航栏中删除顶部和底部填充

1条答案

相关问题

热门标签

最新问答