Nav nie chowa się poza strone

Question

Dałem w kategorii CSS bo na nim pewnie leży problem a nie na samym JS

Tutaj filmik o co mi chodzi. Robię motyw woocommerce i ogolnie to navbar się chowa ale pozostaje tekst, jakieś rady?

https://i.imgur.com/gEY67Dl.mp4

 

_header.scss

	.s-nav {
		padding: 20px;
		color: black;
		position: absolute;
		background-color: white;
		z-index: 3;
		top: 0px;
		transition: 0.3s;
		text-transform: uppercase;
		font-size: 24px;
		height: 100%;
		background-color: white;
		left: 0px;
		text-align: right;
	}


	.top-menu {
		text-align: right;
		list-style-type: none;
		margin: 0;
		padding: 0;
		font-weight: 400;

		li {
			list-style-type: none;

			a {
				color: $dark;
				padding: 0.25rem 1rem;
			}

			a:hover {
				text-decoration: none;
			}
		}
	}

	<div class="phone-nav">
		<div id="s-nav" class="s-nav">
			<span class='s-button' onclick="closeNav()">&times</span>
		<?php
		wp_nav_menu(

			array(

				'theme_location' => 'top-menu',
				'menu_class' => 'top-menu'
			)

		);?>
		</div>
	</div>

 

JS

	<script>
function openNav() {
  document.getElementById("s-nav").style.width = "70vh";
}

function closeNav() {
  document.getElementById("s-nav").style.width = "0px";
}

	</script>

 

Answer 1

Wydaje mi się, że w Twoim kodzie brakuje overflow: hidden

Comments

faktycznie, dzięki bardzo

ale pozostaje mi jeszcze taki kawałek

https://i.imgur.com/mMFNm5U.png

---

Dobra to przez padding