Question

我的测试网站上有一个推送菜单Test Page一切正常，标题是固定的。当我使用移动菜单时，问题就开始了，它会删除标题上的固定位置。我似乎无法弄清楚我需要在我的代码上解决这个问题。

这是我的HTML

var c= document.getElementById('myCanvas').getContext('2d');

//c.fillRect(20,10,250,175);//

c.moveTo(225,75);
c.lineTo(112.5,225);

c.moveTo(112.5,225);
c.lineTo(337.5,225);

c.moveTo(337.5,225);
c.lineTo(225,75);

c.strokeStyle= '#9e9e9e';
c.stroke();

c.fillStyle= '#ffc061';
c.fill();

CSS

mixin navigation_content
    ul
        li: a(href="{{site.baseurl}}/index.html") HOME
        li: a(href="#") ABOUT  
        li: a(href="#") CONTACT

.header_navigation_container
    .logo

    .navigation
        +navigation_content

    a#header_navigation_mobile_button(href="#") 

.header_navigation_mobile_container
    #navigation_mobile_id.navigation_mobile_class
        +navigation_content

JAVASCRIPT

.header_navigation_container
position: relative 
//child absolute
margin: 0 -9999rem
height: 70px
//add back section padding value
padding: .25rem 9999rem
background: #bd3316
color: white
font-size: 1.125rem

.navigation 
    position: absolute
    top: 10px
    margin-left: 70px

    ul

        li 
            display: inline
            margin-right: 50px
        a 
            text-decoration: none
            font-family: 'Teko', sans-serif;
            font-size: 20px
            color: #f3f3f3

//==============================Mobile Navigation Start=============================
#header_navigation_mobile_button
    display: none
    position: fixed
    width: 30px
    height: 30px
    top: 25px
    right: 20px
    background:
        image: url(../img/menu_button.svg)
        repeat: no-repeat

.header_navigation_mobile_container
    position: fixed
    display: block
    top: 0px
    right: 0px
    background: #bb2506
    width: 100%
    height: 100%
    transform: translateX(+100%)
    ul
        position: fixed
        margin-left: 0px
        padding-left: 20px
        list-style-type: none
        text-align: left

        li
            margin-bottom: 20px

        a 
            font-family: 'Teko', sans-serif;
            text-decoration: none
            color: white

//==============================Mobile Navigation END=============================

//Small Monitors and Tablets 
@media (min-width: 501px) and (max-width: 800px)
    .header_navigation_container
        position: fixed
        background-color: blue

    .navigation
        display: none

    #header_navigation_mobile_button
        display: block

    .page_container.open
        transform: translateX(-50%)
        transition: all 0.2s ease-in-out

//Mobile Devices
@media (min-width: 50px) and (max-width: 500px)
    .header_navigation_container
        position: fixed

    .navigation
        display: none

    #header_navigation_mobile_button
        display: block

    .page_container.open
        transform: translateX(-50%)
        transition: all 0.2s ease-in-out

按右菜单禁用固定位置

0 个答案: