时间戳

首页 > 解决方案 > 如何降低顶部菜单栏的高度

css - 如何降低顶部菜单栏的高度

问题描述

我正在尝试减小顶部栏菜单的大小。但他们是我发现的唯一选择line-height。我只是设置了顶部栏类的高度，但它不起作用。如何使标题高度更小？

网址： http ://starconsortiumbd.com/

html代码

<div class="col-sm-6">
  <div class="header-right-bar text-right">
    <ul class="contact-wrapper">
      <li class="acces">
        <ul>
          <li><i class="fa fa-envelope" aria-hidden="true"></i></li>
          <li>
            <a href="#"></a><a href="#">info@starconsortiumbd.com</a></li>

        </ul>
      </li>
      <li>
        <ul class="social-icon">
          <li><a href="https://www.facebook.com/starconsortiumbd/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
          <li><a href="https://linkedin.com" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
          <li><a href="http://gmail.com/" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
          <li><a href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- header-right-bar -->
</div>
</div>
<!-- top-bar -->
</div>
</div>
<!-- top-bar -->

标签： csshtml

解决方案

如果您有导航栏，请尝试将其添加到您的 css 文件中：

.navbar-nav > li > a {
  padding-top:5px !important; padding-bottom:5px !important;
}
.navbar {
  min-height:32px !important
}

否则只需用您的班级名称更改“导航栏”。

.yourclass-yourclass > li > a {
  padding-top:5px !important; padding-bottom:5px !important;
}
.yourclass {
  min-height:32px !important
}

如果上面的代码不起作用，请尝试以下操作：

.navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: smaller;
  line-height: 1em;
}

推荐阅读