Menu icon Foundation
Navigation top bar & hover effect

I have added a horizontal -> drilldown menu but having a few "issues".

Picture #1 is a image of my current menu, which i am trying to edit so it will look like picture #2.

When the menu goes from the desktop to mobile layout, i would like the mnrb.dk (blue) element gets placed in the element above next to "Menu", so "Menu" and mnrb.dk would be on the same line.

Also is their a foundation way to add a hover effect to the elements item 1 -> item 4?

Thanks to all in advance who take the time to read and reply.

picture #1

Picture #2

<header class="row">
		<div id="site-title">
			<h1>My New Random Blog</h1>
		</div>

		<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle="example-menu"></button>
			<div class="title-bar-title">Menu</div>
		</div>
	
		<nav id="example-menu">
			<ul id="site-menu" class="medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
				<li class="active">
					<a href="#">mnrb.dk</a>
				</li>
				<li>
					<a href="#">item 1</a>
				</li>
				<li>
					<a href="#">item 2</a>
				</li>
				<li>
					<a href="#">item 3</a>
				</li>
				<li class="has-submenu">
					<a href="#">item 4</a>
					<ul class="submenu menu">
						<li>
							<a href="#">item 4.1</a>
						</li>
						<li>
							<a href="#">item 4.2</a>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>

navigation menu drilldown

I have added a horizontal -> drilldown menu but having a few "issues".

Picture #1 is a image of my current menu, which i am trying to edit so it will look like picture #2.

When the menu goes from the desktop to mobile layout, i would like the mnrb.dk (blue) element gets placed in the element above next to "Menu", so "Menu" and mnrb.dk would be on the same line.

Also is their a foundation way to add a hover effect to the elements item 1 -> item 4?

Thanks to all in advance who take the time to read and reply.

picture #1

Picture #2

<header class="row">
		<div id="site-title">
			<h1>My New Random Blog</h1>
		</div>

		<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle="example-menu"></button>
			<div class="title-bar-title">Menu</div>
		</div>
	
		<nav id="example-menu">
			<ul id="site-menu" class="medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
				<li class="active">
					<a href="#">mnrb.dk</a>
				</li>
				<li>
					<a href="#">item 1</a>
				</li>
				<li>
					<a href="#">item 2</a>
				</li>
				<li>
					<a href="#">item 3</a>
				</li>
				<li class="has-submenu">
					<a href="#">item 4</a>
					<ul class="submenu menu">
						<li>
							<a href="#">item 4.1</a>
						</li>
						<li>
							<a href="#">item 4.2</a>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
cristian ambaek over 2 years ago

Solved it for the time being

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
			<span>
				<button class="menu-icon" type="button" data-toggle="example-menu"></button>
			</span>
			<span>mnrb.dk</span>
		</div>

float span right.

Media query to remove .active at 640px