Jumping Navigation

[lauren_olsen17]

Hey!

I can’t seem to figure this one out, maybe someone else can see what I’m not seeing.

I can’t seem to make my navigation not jump (or look the the page is having a seizure ) .
Anyways, here the link 2016-tradeshow

Here is the html

<header>
		<div class="top-bar"></div>
			<section class="header">
				<div class="col-15">
					<div class="header-img">
						<img src="../assets/img/trade-show-header.svg">
					</div> 
					<div class="clearfix"></div>
					<nav id="navigation" class="site-navigation" role="navigation">
						<ul class="menu">
							<li class="menu-item"><a href="#">Search</a></li>
							
							<li class="menu-item"><a href="#">Edmonton</a>
								<ul class="dropdown">
									<li class="menu-item sub-menu"><a href="#">Edmonton Lists</a></li>
									<li class="menu-item sub-menu"><a href="#">Edmonton Stats</a></li>
								</ul>
							</li>

							<li class="menu-item"><a href="#">Calgary</a>
								<ul class="dropdown">
									<li class="menu-item sub-menu"><a href="#">Calgary Lists</a></li>
									<li class="menu-item sub-menu"><a href="#">Calgary Stats</a></li>
								</ul>
							</li>

							<li class="menu-item"><a href="#">Saskatoon</a>
								<ul class="dropdown">
									<li class="menu-item sub-menu"><a href="#">Saskatoon Lists</a></li>
									<li class="menu-item sub-menu"><a href="#">Saskatoon Stats</a></li>
								</ul>
							</li>

							<li class="menu-item"><a href="#">Red Deer</a>
								<ul class="dropdown">
									<li class="menu-item sub-menu"><a href="#">Red Deer Lists</a></li>
									<li class="menu-item sub-menu"><a href="#">Red Deer Stats</a></li>
								</ul>
							</li>

							<li class="menu-item"><a href="#">Prizes</a>
								<ul class="dropdown">
									<li class="menu-item sub-menu"><a href="#">Edmonton AB</a></li>
									<li class="menu-item sub-menu"><a href="#">Calgary AB</a></li>
									<li class="menu-item sub-menu"><a href="#">Saskatoon SK</a></li>
									<li class="menu-item sub-menu"><a href="#">Red Deer AB</a></li>
									<li class="menu-item sub-menu"><a href="#">Prize Check</a></li>
								</ul>
							</li>
						</ul>
					</nav>
					
					
					
				</div>
			</section>
	</header>

and SCSS/CSS

@import "../basics";

@include bp (mobile) {

.wrapper{
	header{
		//toggle-nav-btn
		
		#toggle-nav-btn{
			display: block;
			position:relative;
			top: 0;
			right: 0;
			left: 0;
			color: #FFFFFF;
			padding: 1em;
			background: $cgs-blue;
			text-decoration: none;
		}

		#navigation ul.initial-state{ max-height: 0; }

		.site-navigation {
		    width: 100%;
		    background: $cgs-blue;
		    position: relative;
		    top:0;
		    z-index: 9999;
		}

		.site-navigation ul {
		  margin: 0;
		  text-align: center;
		  list-style-type: none;
		  max-height:100%;
		  transition:max-height 30ms ease;
		  overflow: hidden;
		}

		.site-navigation ul li{
			color: #fff;
		    display: block;
		    padding:0.5em;
		    border-bottom: 1px solid $lt-blue; 
		    position: relative;
		    text-decoration: none;
		    text-transform: uppercase;
		    margin:0; 
		}

		.site-navigation li a {
		  color: #fff;
		  text-decoration: none;
		  display: block;
		}

		.site-navigation li:hover {
		    @include transition(background, 0.2s);
		    background: $lt-blue;
		    cursor: pointer;
		}
		.site-navigation li:hover:first-child{
			background: transparent;
			padding: 0;
			margin: 0;
			border: none;
		}
		.site-navigation ul li ul {
		    visibility: hidden;
		  	min-width: 100%;
		    position: absolute;
		  	transition: visibility 0.30s ease-out;
		    left: 0;
		    z-index: 999;
		}

		.site-navigation ul li:hover > ul,
		.site-navigation ul li ul:hover {
		   visibility: visible;
		   height: auto;
	       position: relative;
	       display: block;
	       width: 100%;
		}

		.site-navigation ul li:hover > ul li,
		.site-navigation ul li a:hover{
			border-bottom: 1px dashed #FFF;
			margin: 0;
		}
		.site-navigation ul li a:hover{ padding: 1em;}
	}
}

}

@include bp (tablet) {

.wrapper{
	header{
		//toggle-nav-btn
		
		#toggle-nav-btn{ display:none; }

		.site-navigation ul li {border:transparent;}
		
		.site-navigation li {
			width: 16%;
		    display: block;
		    float: left;
		}

		.site-navigation ul li ul { float: left; }
		
		.site-navigation ul li ul li {
		    clear: both;
		  	width: 100%;
		}
		.site-navigation ul li:hover > ul li,
		.site-navigation ul li a:hover{ border-bottom: transparent;  }
		.site-navigation ul li a:hover{ padding: 0;}

					
	}
}

}

I’m hoping someone can see what I’m missing

Thanks

[lauren_olsen17]

I pretty much got it figured out… When all else fails work backwards

[PaulOB]

Hi,

You have some weird stuff going on there

The overflow is hidden for a start and therefore the dropdown menu can’t escape as you want it to be absolutely placed and not in the flow of the page.

If you want to contain the floats then use the :after method instead as that won’t interfere with the dropdowns.

Don’t change the padding on hover either as that will cause jumps. If you want the sub menus set to be smaller than the top level then apply the padding styles to the sub menu items only but you don;t need to do it on hover.

You don;t want a max-height on the dropdown ul as that will take the height form the list parent and give you virtually no height.

Here is some code that will make the menu appear but of course I don’t know what styling you were aiming for and why you have done certain things.

#navigation ul{overflow:visible}
#navigation:after{
content:"";
display:table;
clear:both;
}
#navigation .menu ul{
position:absolute;
top:100%;
background:blue;/* adjust to suit*/
max-height:none;
z-index:99;
}
#navigation .menu ul li:hover:first-child{background:#47a3da}/* why did you have a first child rule?*/
#navigation ul.menu li,
#navigation ul.menu li:hover {
    padding:0;
}
#navigation  ul.menu a,
#navigation  ul.menu a:hover {
padding:15px;
margin:0
}

Of course these are over-rides and should follow on after your original but you should integrate them properly once you know its working.

[lauren_olsen17]

Thanks! I will try this.