如何在不改变样式的情况下向我的导航添加引导响应功能

Question

我正在开发一个导航，我想向它添加引导响应功能，但不改变我原来的样式，比如颜色、高度等。如果有人可以帮助我，不胜感激。

下面是导航标记。

    <header id="pageHeader">
        <div class="container">
            <div id="logo">
            </div>
            <div id="navMain">
                <ul id="navContainer">
                    <li><a class="selected" href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="portfolio.html">PORTFOLIO</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </header>

这是我使用的样式。

#pageHeader{
  background-color: rgb(250,210,0);
  width: 100%;
}
/* 3.2. Logo Styling */
#logoTop{
  float:left;
}
/* 3.3. Main Navigation Styling */ 
#navMain{
  float: right;
  position: relative;
  margin: 84px 10px 21px 10px;
}
ul#navContainer{
  display: block;
  position: inherit;
}
#navMain ul li{
  float: left;
  display: block;
  margin: 0px auto;
  font-weight: bold;
  list-style-image: none;
}
#navMain ul li a{
  color: rgb(99,99,99);
  font-size: 18px;
  padding: 10px 3px 10px 12px;
  font-family: "nexa_500", Tahoma, Geneva, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: color ease 0.7s;
  -moz-transition: color ease 0.7s;
  -o-transition: color ease 0.7s;
  transition: color ease 0.7s;
}
#navMain li a:hover,
#navMain li a:active {
  text-decoration: none;
  color: rgb(33,33,33);
  -webkit-transition: color ease 0.7s;
  -moz-transition: color ease 0.7s;
  -o-transition: color ease 0.7s;
  transition: color ease 0.7s;
}
#navMain ul li a.selected{
  color: rgb(33,33,33);
}

Answer 1

您编写如下查询：

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

   position:fixed;
   margin-top:10px;

    }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
   write query here as well

          }

/* Landscape phones and down */
@media (max-width: 480px) { 
    write query  here as well
      }