jak zmienić menu aby rozwijalo sie pod hamburgerem - bootstrap

Question

Mam problem z menu - hamburger jest po prawej stronie ale po kliknięciu rozwija się po lewej - co prawda jak zmienię układ i dam hamburgera po lewo to działa ok - ale po prawej stronie nie zasłania mi tak bardzo treści i logo, wstawiam część kodu i zdjęcie poglądowe żeby pokazać co jest nie tak, chciałbym aby menu rozwijało się od spodu

 

<header>
			
				<div class="header">
					<div clsss="navbar-brand">
						<div class="logo"><image src="zdjecia/Logo1.png" style="float:left"/> Na Południe stąd...</div>
					
							<div clsss="col-sm">
								<div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
						</div> 
					</div>
				</div>
   

<nav class="navbar navbar-expand-lg fixed-top navbar-light">

<button class="navbar-toggler" style="float:right" data-toggle="collapse"  data-target="#navbarResponsive">
		<span class="navbar-toggler-icon">
		</span>
</button>
	
 
	<div class="collapse navbar-collapse  id="navbarResponsive">
	
		<ul class="navbar-nav  m-auto"> 
	 
			
	
		<li class="nav-item active">
			<a href="index.php"  title="Home"> <i class="icon-home"> </i> </a> </li> 
  
		<li class="nav-item active">
			<a href="film.php" title="Film" >Film</a></li>
		
		<li class="nav-item active">
			<a href="historia.php" title="Historia" >Historia</a></li>
			
		<li class="nav-item active">
			<a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	
		<li class="nav-item active">
			<a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
		
		<li class="nav-item active">
			<a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
		
		<li class="nav-item active">
			<a href="omnie.php" title="O mnie">O mnie </a></li>
   
		<li class="nav-item active">
			<a href="englishversion.php" title="English version"> <i class="icon-language"> </i></a></li> 
	
		</ul><!-- znacznik ul-->
	</div> <!--zamyka "collapse navbar-collapse" id="collapse_target" -->
</nav><!--znacznik nav-->

</header>

I CSS

.navbar
{
	width:100%;
	position: fixed;
	display:inline-block;
	top:-10px;
	z-index:2;
	margin-left:auto;
	margin-right:auto;
	
	
}

.navbar-toggler 
{
  background-color:gray;
}
	
.dropdown-menu
{
	display:inline;
	
}


.nav-item
{
	top:0;
	width:126.3px;
	background-color:#e2e2e2;
	padding:10px 0;
	text-align:center;
	font-size:20px;
	height:50px;
	display:inline-block;
	border-style:none;
}

Comments

Popraw literówkę w 4 i 7 liniach. Powinno być "div class" zamiast "div clsss". Gdzie jest zamknięcie 'div' z 7 linii?

---

poprawione dzięki za czujne oko! zatknięcie jest w linii 9 - źle dopasowałem tab ale to jest to zamknięcie

Answer 1

W 22 lini masz błąd. Brakuje Ci zamknięcia cudzysłowu od nazwy klasy. Prawdopodobnie to jest przyczyną błędu. Bo z tego powodu nie rozpoznaje id.

Comments

poprawione - nadal mam po lewo :/ może da się wystylizować to przez position: fixed i dać odpowiednio w @media? tylko jak tak robię to mi pokazuje się (tez po lewej stronie) ostatni kafelek a nie całe menu

---

zerknij tutaj: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items

Masz odnośnik do codeply gdzie znjdziesz wiele przykładów. Powinno Ci pomóc.

Answer 2

Spróbuj dopisać w CSS

"Right:  0" do tego menu

Comments

nope nadal zostaje doczepione tylko do lewej strony