Question

所以现在我有一个工作设置，以便当导航器大于屏幕时，然后向下移动图片滑块。然而，问题是当导航器越过徽标时导航器不会很快消失。我希望将徽标大小考虑在内也更敏感。

现在，这就是我实现这一目标的方式。

   /* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* nav-wrap */
#nav-wrap {
    position: relative;
   font: 22px raleway-bold, sans-serif;
   float: right;
   margin-top: 36px;
   margin-right: 20px;
   z-index: 99999;
}

/* hide toggle button */
#nav-wrap > a.mobile-btn {
   display: none;
   border-radius: 3px;
}

ul#nav {
   min-height: 48px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#nav li {
    position: relative;
    list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */

   display: inline-block;
   padding: 8px 11px;
   line-height: 32px;
    text-decoration: none;
   text-align: left;
   color: #14C9CF;

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #fff; }

/* adds down arrow */
ul#nav span:after {
   width: 0;
    height: 0px;
    border: 4px solid transparent;
    border-bottom: none;
    border-top-color: #8a8383;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: 5px;
}

/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
   position: absolute;
   top: 100%;
   left: 0;
    background: #1f2024;
   min-width: 100%;

    border-radius: 0 0 3px 3px;

   /* for transition effects */
   opacity: 0;
   filter: alpha(opacity=0);

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

/* Third level sub menu
ul#nav ul ul {
    position: absolute;
    top: 0;
    left: 100%;

    border-radius: 0 3px 3px 3px;
}
*/

ul#nav ul li {
   padding: 0;
   display: block;
   text-align: left;

   /* for transition effects */
   height: 0;
    overflow: hidden;

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

/*On Hover */
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); }
ul#nav li:hover > ul li {
   height: 42px;
   overflow: visible;
   border-bottom: 1px solid #26272C;
}
ul#nav li:hover > ul li:last-child  { border: none; }

/* Sub Menu Anchor links */
ul#nav ul li a {
    padding: 6px 15px;
    margin: 0;
   white-space: nowrap;
   font-size: 13px;
}

你可以看到它实现了它：

    /* hide toggle button */
#nav-wrap > a.mobile-btn {
   display: none;
   border-radius: 3px;
}

但它没有使用徽标来确切知道它何时开始或停止。因此导航将覆盖到徽标上。有没有办法说明徽标？

修改 https://jsfiddle.net/q2ozq1q2/3/

Answer 1

在较小的屏幕上观看时，你可以调整图像和导航栏的大小：

使用以下css作为示例：

img {
 max-width:250px;
 max-height:250px;
}

#nav-wrap ul#nav {
 position:absolute;
 width:100%;
}

ul#nav ul li a{
 word-break:break-all;
 width:100%;
}

Answer 2

您应该为img代码添加一个类 -

header .logo a {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;

}
header .logo a img{
  width: 210px;
  height: 34px;
}

当屏幕太小时，将菜单切换为标签图片

2 个答案: