Question

如何在不影响导航栏高度的情况下，将bootstrap导航栏的背景颜色扩展到背景标题图片品牌？此外，字体的颜色变为黑色。我尝试用我的css文件中的白色字体颜色覆盖它，但没有改变。

以下是我希望它的样子：

这是从psd文件中获取的。这就是我尝试将其转换为html / css时的样子：

HTML代码

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  </head>
  <body>

    <header class="pimg1">
      <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-toggle" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

    <div class="collapse navbar-collapse" id="nav-toggle">
        <ul class="nav navbar-nav navbar-center">
          <li><a href="#Home" class="nav-link home">Home</a></li>
          <li><a href="#Services" class="nav-link">About Us</a></li>
          <li><a name="Home" class="nav-link navbar-brand">Logo</a></li>
          <li><a href="#Portfolio" class="nav-link">Menu</a></li>
          <li><a href="#Contact" class="nav-link">Career</a></li>
          <li><a href="#Contact" class="nav-link">Contact</a></li>
        </ul>
    </div>
    </div>
  </nav>

CSS代码

   body, html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
  color: #000009; 
}

.border-bottom, .section-two .waffle-border hr, .section-two .b-container hr, .section-three hr {
  width: 5%;
  border-bottom: 5px solid #f41313;
  border: 0;
  border-top: 3px solid #f41313;
 }

.navbar-default {
  background: #FFFFFF; 
}

.navbar-default .navbar-brand {
  color: #000009; }

.navbar-nav {
  width: 100%;
  text-align: center; }
  .navbar-nav > li {
    float: none;
    display: inline-block; 
}

.navbar-toggle .icon-bar {
  background-color: black; 
}

.navbar .navbar-nav > li > a {
  color: #000009;
  line-height: 3rem; 
}

.navbar-brand {
  font-size: 2.5rem;
  color: #FFFFFF;
  font-family: "Permanent Marker", cursive;
  background-color: #8B1015;
  height: 8.125rem; 
}

.navbar-default .navbar-toggle {
  border-color: #FFFFFF;
 }

.pimg, .pimg1 {
  position: relative;
  opacity: 0.80;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%; }

.ptext {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  font-size: 4rem;
  letter-spacing: 8px;
  text-transform: uppercase;
  font-family: "Permanent Marker", cursive; 
}

.pimg1 {
  background-image: url(../imgs/bg-header2.jpg);
  opacity: 0.90; 
}

对于乱码我很抱歉，我使用的是SASS。

Answer 1

更改

.navbar-default .navbar-brand {
  color: #000009; 
}

通过：

.navbar-default .navbar-nav>li>a.navbar-brand {
  color: #000009; 
}

因为以下样式".navbar-default .navbar-nav>li>a"是优先事项。

如何在不影响导航栏高度的情况下扩展bootstrap导航栏品牌的背景颜色

1 个答案: