Ad

Expanding Menu Shifts To The Right After SlideToggle()

- 1 answer

I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.

To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.

See snippet to view the issue.

$('span.nav-btn').click(function () {
		$('ul.nav_list').slideToggle(500);
	})
	$(window).resize(function (){
		if ( $(window).width() > 600 ) {
			$('ul.nav_list').removeAttr('style');
		}
	});
body {
		padding: 0;
		margin: 0;
		font-family: 
	}
	.header {
		margin: 0;
		background-color: #333;
		height: 80px;
	}
	.header_wrap {
		margin: 0 15%;
	}
	.logo {
		color: #FFF;
		font-size: 1.2em;
		padding-top: 25px;
		position: absolute;
	}
	.nav_list {
		text-decoration: none;
		background-color: #333;
		color: #FFF;
		margin: 0;
		list-style: none;
		text-align: right;
	}
	.nav_list > li {
		display: inline-block;
		padding: 25px 15px;
	}
	.nav_list > li > a {
		text-decoration: none;
		font-size: 1.2em;
		color: #FFF;
	}
	
	@media screen and (max-width:640px) {
		body {
			background-color: blue;
		}
		.header_wrap {
			margin: 0 5%;
		}
		.nav_list {
			text-align: center;
			display: none;
			margin-top: 60px;
		}
		.nav_list > li {
			display: block;
			border-bottom: 1px solid #FFF;
		}
		.nav-btn {
			display: block;
			background-color: #333;
			color: #FFF;
			font-size: 1.5em;
			text-align: right;
			cursor: pointer;
			padding-top: 20px;
		}
		.nav-btn:before {
			background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
			background-size: 28px 28px;
			background-repeat: no-repeat;
			width: 28px;
			height: 28px;
			content:"";
			display: block;
			float: right;
		}
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
	<header class="header">
		<div class="header_wrap">
			<div class="logo">Garbrandt Construction</div>
			<nav>
				<span class="nav-btn"></span>
				<ul class="nav_list">
					<li><a target="_blank" rel="nofollow noreferrer" href="#">Services</a></li>
					<li><a target="_blank" rel="nofollow noreferrer" href="#">About us</a></li>
					<li><a target="_blank" rel="nofollow noreferrer" href="#">Pricing</a></li>
					<li><a target="_blank" rel="nofollow noreferrer" href="#">Gallery</a></li>
					<li><a target="_blank" rel="nofollow noreferrer" href="#">Contact</a></li>
				</ul>
			</nav>
		</div>
	</header>
</body>

Ad

Answer

Try adding the last line to your nav_list (padding-left:0 is needed):

.nav_list {
        text-align: center;
        display: none;
        margin-top: 60px;
  padding-left:0;
    }

JS Fiddle

Ad
source: stackoverflow.com
Ad