wordpress中消失的移動導航欄

我的wordpress網站（mustafasprojects.com）在我把它放在wordpress中時缺少移動導航欄。當我檢查它時，它在html文件中，但我無法得到相同的導航欄出現在wordpress中。至於我的HTML代碼，它是標準的導航欄的東西。wordpress中消失的移動導航欄

<header id="header"> 
      <h1><a href="http://www.mustafasprojects.com">Mustafa's Projects</a></h1>  
       <nav id="nav"> 
        <ul> 
        <li><a href="http://www.mustafasprojects.com">Home</a></li> 
         <li><a href="http://www.mustafasprojects.com/mywork">My Work</a></li> 
          </ul> 
         </nav> 
        </header> 

#header { 
     position: fixed; 
     z-index: 10000; 
     left: 0; 
     top: 0; 
     width: 100%; 
     background: rgba(255, 255, 255, 0.95); 
     height: 3em; 
     line-height: 3em; 
     box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1); 
     animation: 1s ease-out 0s 1 SlideInFromTop; 
    } 

     #header h1 { 
      height: 3em; 
      left: 1em; 
      line-height: 3em; 
      margin: 0; 
      padding: 0; 
      position: absolute; 
      top: -.225em; 
      font-size: 1.2em; 
     } 

     #header h1 a { 
       color: #000 
       font-size: 1.1em; 
       border: 0; 
} 

     #header nav { 
      position: absolute; 
      right: 0.5em; 
      top: .525em; 
      height: 1em; 
      line-height: 1em; 
      vertical-align: middle; 
     } 

      #header nav ul { 
       margin: 0; 
      } 

       #header nav ul li { 
        display: inline-block; 
        margin-left: 0.5em; 
        font-size: 0.95em; 

       } 


         #header nav > ul > li a { 
         display: inline-block; 
         height: 1.7em; 
         line-height: 1.7em; 
         padding: 0 .3em; 
         border-radius: 6px; 
        } 

        #header nav > ul > li a:not(.button) { 
         color: #000; 
         display: inline-block; 
         text-decoration: none; 
         border: 0; 
        } 

         #header nav > ul > li a:not(.button).icon:before { 
          color: #999; 
          margin-right: 0.5em; 
         } 

         #header nav > ul > li a:hover:not(.active) { 
          background-color: #266dd3; 
         } 
       #header nav > ul > li:first-child { 
         margin-left: 0; 
        } 
      #header nav > ul > li.active a:not(.button) { 
         background-color: rgba(153, 153, 153, 0.25); 
        } 
        #header nav > ul > li .button { 
         margin: 0 0 0 0.5em; 
         position: relative; 
        } 
     @media screen and (max-width: 736px) { 

      #header { 
       height: 2.5em; 
       line-height: 2.5em; 
      } 

       #header h1 { 
        text-align: center; 
        position: relative; 
        left: 0; 
        top: 0; 
        height: 2.5em; 
        line-height: 2.5em; 
       } 

        #header h1 a { 
         font-size: 1em; 
        } 

       #header nav { 
        display: none; 
       } 

     } 

    .header.onload-header-fade-down { 
      transform: 0.75s ease-in-out; 
     transition: opacity .75s ease-in-out, transform .75s ease-in-out; 
}

所以是的，如果有人能幫助我解決缺少的導航欄也將是非常讚賞的情況下。它不會出現在wordpress的平板電腦或手機視圖中，但會出現在檢查器的平板電腦/手機視圖中。

感謝

來源

2017-08-03 amnmustafa15

你在屏幕隱藏頭部寬度小於840px較小：

@media screen and (max-width: 840px) 
    #header { 
     display: none; 
    }

在HTML文件的2906行。

其實，真的很糟糕，因爲你有一個重複的<header id="header">元素。

來源

2017-08-03 01:35:52 JakeParis

如果你看看你的媒體查詢，你隱藏的導航欄在736px以下的任何屏幕尺寸。

@media screen and (max-width: 736px) { 
#header nav { 
     display: none; 
     } 
}

如果您刪除它，您將會看到您的導航欄。根據你的代碼的其餘部分的樣子，你將不得不>

1）從你的最大寬度查詢或 2）將其更改爲顯示刪除整個的#header導航線：塊。

我不確定代碼的其餘部分是什麼樣的，或者你想要完成什麼，但是其中的任何一個都可以工作。

來源

2017-08-03 01:51:32 grimesd

wordpress中消失的移動導航欄

回答

相關問題