帶全屏覆蓋的bootstrap4導航欄

我想讓引導4導航欄保持完全展開。此外，我希望有一個疊加元素，其中的圖像和文本對齊到右側。即可點擊的img /文本「所有類別」與右側對齊。帶全屏覆蓋的bootstrap4導航欄

這是我的。我無法讓文字轉到正確的位置。

.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
}

<body> 
 
    
 
    <div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 
    
 
    
 
    <nav class="navbar navbar-expand navbar-light bg-light"> 
 
    <a class="navbar-brand" href="#"> 
 
     <img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">Brand-name 
 
    </a> 
 
    <div> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; All categories</span> 
 
     <script> 
 
     function openNav() { 
 
     document.getElementById("myNav").style.width = "100%"; 
 
     } 
 
     function closeNav() { 
 
     document.getElementById("myNav").style.width = "0%"; 
 
     } 
 
     </script> 
 
    </div> 
 
    </nav> 
 
</body>

請告訴我，如果HTML是好的，以及如何使「所有類別」現身導航欄的右側。

謝謝！

來源

2017-11-25 Netrunner21

.overlay一個{文本對齊：權利; }？ –

試過了，不起作用。我加了{text-align：right; }和{float：right; }給大多數類，沒有結果。 – Netrunner21

查看答案。那是你要的嗎？ –

您需要將span元素設置爲display:block;，然後才能使用text-align: right;。

我添加了一個類nav-icon的跨度和移動你的內嵌樣式的CSS部分：

.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
.nav-icon{ 
 
    font-size:30px; 
 
    cursor:pointer; 
 
    display: block; 
 
    text-align: right; 
 
}

<body> 
 
    
 
    <div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 
    
 
    
 
    <nav class="navbar navbar-expand navbar-light bg-light"> 
 
    <a class="navbar-brand" href="#"> 
 
     <img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">Brand-name 
 
    </a> 
 
    <div> 
 
    <span class="nav-icon" onclick="openNav()">All categories &#9776;</span> 
 
     <script> 
 
     function openNav() { 
 
     document.getElementById("myNav").style.width = "100%"; 
 
     } 
 
     function closeNav() { 
 
     document.getElementById("myNav").style.width = "0%"; 
 
     } 
 
     </script> 
 
    </div> 
 
    </nav> 
 
</body>

來源

2017-11-27 01:54:15 Sohrab

帶全屏覆蓋的bootstrap4導航欄

回答

相關問題