时间戳

首页 > 解决方案 > 单击链接时主导航移动

html - 单击链接时主导航移动

问题描述

我试图截取屏幕截图以帮助更好地描述问题，但没有运气捕捉到。

我正在尝试解决我的网站http://abrielshipley.com上的问题，其中主导航的位置似乎正确。

当我单击其中一个主导航链接时，主导航会位于左侧徽标的下方。当单击主导航链接之一时，如何解决此问题主导航是否仍显示在屏幕右上角的正确位置？

以下是 SASS 中主要导航元素的一些代码：

nav
    width: initial
    border: none
    display: inline-block
    margin-right: 0
    position: absolute
    right: 4em
    &:active
        display: block
        position: static
        width: 100%
    li
        display: block
        line-height: 3.5em
        text-align: center
    li:first-of-type
        margin-right: 1.5em
    a
        border: none
        font-size: 1.125em
        display: list-item

header a
    color: #FFF
    cursor: pointer
    text-decoration: none
    text-transform: uppercase
    -webkit-transition: all 0.5s ease-in-out
    -moz-transition: all 0.5s ease-in-out
    -o-transition: all 0.5s ease-in-out
    transition: all 0.5s ease-in-out
    &:hover
      color: #D8D8D8
    &:focus
      outline: 1px solid #F1F1F1

标签： htmlcsssass

解决方案

只需删除这个：

&:active
    display: block
    position: static
    width: 100%

推荐阅读