Question

我正在尝试使用媒体查询，以便将500px以上的导航显示为右上方标题部分菜单类中的3个项目（无背景）。

汉堡包导航功能完全低于500px，但在它上方卡在页面的左侧，它不会显示在线，甚至不会改变背景颜色。

有什么建议吗？

Live页面已托管here。回购是here。

Answer 1

＆＃13;

/* Explicitly add the particular section of code outside media query */

div#nav{
   background-color : #dddddd;
   width : 100%;
  }
  div#nav *{ 
   display : inline-block;
  }
 
@media (min-width: 1000px) {
 div#nav{
   background-color : #dddddd;
   width : 100%;
  }
  div#nav *{ 
   display : inline-block;
  }
 }

＆＃13;

<div id="nav">
      
          <nav class="dropdown-content">
              <a href="#" class="menu">Why Clarity</a>
              <p class="divider"> | </p>
              <a href="#" class="menu">Benefits</a>
              <p class="divider"> | </p>
              <a href="#" class="menu">Diversity</a>
          </nav>
</div>

＆＃13;

HTML / CSS更改下拉导航到标题

1 个答案: