Balu Balu - 3 months ago 10
CSS Question

CSS dropdown menu - whole bar is moving

I am quite desperate about this. I guess it's just some stupid mistake - however, I am quite newbie and I can't see it now.

I am creating a wordpress theme with Underscores framework and my dropdown menu is not behave the way it should. The whole bar is moving down when I use the dropdown.

Here's demo:
LINK

The menu bar should be of course fixed at the top of the page. Here's the CSS:

@media screen and (min-width: 50em) {
.main-navigation,
.main-navigation.toggled {
position:relative;
top: 0;
margin: 0 auto;
position: fixed;
z-index: 5;
min-height: 3em;
}

.nav-menu {
padding: 0.3em 0 0 0;
background-color: transparent;
}

.main-navigation ul,
.main-navigation.toggled ul{
max-height: none;
padding-left: 0;
text-align: center;
}

.main-navigation.toggled ul{
overflow-y: visible;
}

.main-navigation li {
display: inline-block;
}

.main-navigation ul li {
position: relative;
}

.main-navigation ul ul {
outline: 1px solid #333;
}

.main-navigation li li {
display: block;
text-align: left;
}

.main-navigation a {
min-width: 14em;
max-width: 23em;
}

.main-navigation a,
.main-navigation ul ul li:last-child a {
border-bottom: none;
}

.main-navigation ul ul.toggle-on {
position: absolute;
width: 12em;
display: block;
z-index: 10;
margin-left: 0;
}


.main-navigation ul ul ul.toggle-on {
position: relative;
}

.main-navigation a {
min-width: 14em;
max-width: 23em;
}

.main-navigation.toggled:after {
display: none;
}

}


Classic wordpress menu:

<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'hitchdiary' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->


Any suggestions?

Answer

check the result by adding "vertical-align:top" property to the list item

.main-navigation li {
    display: inline-block;
    vertical-align: top;
}