在切换上更改导航栏品牌文字

时间：2015-03-13 07:58:35

标签： html css twitter-bootstrap

我在调整大小时使用navbar-brand时遇到了麻烦。我正在使用最新的bootstrap CSS（getbootstrap.com）。我无法显示我想要的文字。即当我调整浏览器的尺寸时，＆＃34;品牌文字＆＃34;导航栏内的内容保持不变。

当我调整浏览器大小时，我真正想要的是h4 <h4 class=navbar-brand visible-xs href=#>GCS</h4>标记，而不是＆＃34; a＆＃34;在菜单中标记<a class=navbar-brand hidden-xs href=#><em>Gujarat</em> Chhatra Sansad<span class=logo-s></span></a>。

这里有一些html和css代码。

＆＃13;
＆＃13; 
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  margin-top: 40px;
  color: #fff;
  background-color: #03A9F4;
  font-size: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  font-size: 18px;
  color: #fff;
  background-color: #03A9F4;
}
header.site-header {
  background-color: #fff;
  padding-bottom: 150px;
}
.logo-wrapper {
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
.logo-wrapper a.navbar-brand {
  position: relative;
  background-color: #fff;
  padding: 0 20px;
  margin: 0 !important;
  height: 80px;
  line-height: 80px;
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.logo-wrapper a.navbar-brand em {
  font-style: normal;
  color: #777;
}
.logo-wrapper a.navbar-brand:hover {
  background-color: #fff;
}

.logo-wrapper .logo-s {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/logo-s.png) no-repeat;
  margin-right: -99px;
  margin-top: -19px;
  width: 122px;
  height: 122px;
}
.navbar-nav.navbar-right:last-child {
  margin-right: 0;
}
#main-menu ul {
  position: relative;
  z-index: 9;
  margin-top: 30px;
  height: 80px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
#main-menu ul .nav-s {
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/nav.png) no-repeat;
  margin-left: -99px;
  margin-top: -23px;
  width: 122px;
  height: 122px;
}
#main-menu ul li a {
  padding: 0;
  margin: 0 35px;
  line-height: 80px;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}
#main-menu ul li a:hover {
  color: #f55858;
}
#main-menu ul li:first-child {
  margin-left: 30px;
}
#main-menu ul li:last-child {
  margin-right: 30px;
}
#main-menu ul li.active a {
  background: transparent;
  color: #f55858;
}
＆＃13; 
<nav class="navbar navbar-default navbar-fixed-top">
<div class=container>
<div class=row>
<div class=navbar-header>
<button class=navbar-toggle type=button data-toggle=collapse data-target=#main-menu>
<span class=sr-only>Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<div class=logo-wrapper>
<a class=navbar-brand hidden-xs href=#>
<em>Gujarat</em> Chhatra Sansad
<span class=logo-s></span>
</a>
<h4 class=navbar-brand visible-xs href=#>GCS</h4>
</div>
</div>
<div class="collapse navbar-collapse" id=main-menu>
<ul class="nav navbar-nav navbar-right">
<span class=nav-s></span>
<li class=active><a href=#top>Home</a></li>
<li><a href=#product-inner>Mission</a></li>
<li><a href=#portfolio>Sponsors</a></li>
<li><a href=#promotion>Register</a></li>
<li><a href=#contact>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你在这里错过了一些双引号 - ＆gt; <a class="navbar-brand hidden-xs" href=#>，现在应该解决。

＆＃13;
＆＃13; 
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  margin-top: 40px;
  color: #fff;
  background-color: #03A9F4;
  font-size: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  font-size: 18px;
  color: #fff;
  background-color: #03A9F4;
}
header.site-header {
  background-color: #fff;
  padding-bottom: 150px;
}
.logo-wrapper {
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
.logo-wrapper a.navbar-brand {
  position: relative;
  background-color: #fff;
  padding: 0 20px;
  margin: 0 !important;
  height: 80px;
  line-height: 80px;
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.logo-wrapper a.navbar-brand em {
  font-style: normal;
  color: #777;
}
.logo-wrapper a.navbar-brand:hover {
  background-color: #fff;
}
.logo-wrapper .logo-s {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/logo-s.png) no-repeat;
  margin-right: -99px;
  margin-top: -19px;
  width: 122px;
  height: 122px;
}
.navbar-nav.navbar-right:last-child {
  margin-right: 0;
}
#main-menu ul {
  position: relative;
  z-index: 9;
  margin-top: 30px;
  height: 80px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
#main-menu ul .nav-s {
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/nav.png) no-repeat;
  margin-left: -99px;
  margin-top: -23px;
  width: 122px;
  height: 122px;
}
#main-menu ul li a {
  padding: 0;
  margin: 0 35px;
  line-height: 80px;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}
#main-menu ul li a:hover {
  color: #f55858;
}
#main-menu ul li:first-child {
  margin-left: 30px;
}
#main-menu ul li:last-child {
  margin-right: 30px;
}
#main-menu ul li.active a {
  background: transparent;
  color: #f55858;
}
＆＃13; 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class=container>
    <div class=row>
      <div class=navbar-header>
        <button class=navbar-toggle type=button data-toggle=collapse data-target=#main-menu>
          <span class=sr-only>Toggle navigation</span>
          <i class="fa fa-bars"></i>
        </button>
        <div class=logo-wrapper>
          <a class="navbar-brand hidden-xs" href=#>
            <em>Gujarat</em> Chhatra Sansad
            <span class=logo-s></span>
          </a>
          <h4 class="navbar-brand visible-xs" href=#>GCS</h4>
        </div>
      </div>
      <div class="collapse navbar-collapse" id=main-menu>
        <ul class="nav navbar-nav navbar-right">
          <span class=nav-s></span>
          <li class=active><a href=#top>Home</a>
          </li>
          <li><a href=#product-inner>Mission</a>
          </li>
          <li><a href=#portfolio>Sponsors</a>
          </li>
          <li><a href=#promotion>Register</a>
          </li>
          <li><a href=#contact>Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题