Menu icon Foundation
2 sticky topbars

<div class="sticky">
    <nav class="top-bar" data-topbar>
		<ul class="title-area">
			<li class="name"></li>
			<li class="toggle-topbar menu-icon">
				<a href="#">MENU</a>
			</li>
		</ul>
		<section class="top-bar-section">
			<ul class="left">
			
				<li>
					<a style="background-color: #003366;" href="#">Kids Enterprise</a>
				</li>

			</ul>

          <ul class="right">
          	<li>
          		<a  style="background-color: #003366;" href="file:///C:/wamp/www/Kids%20Enterprise/video.html">Videos</a>
          	</li>

          	<li>
          		<a  style="background-color: #003366;" href="#">Music</a>
          	</li>

             <li>
          		<a  style="background-color: #003366;" href="file:///C:/wamp/www/Kids%20Enterprise/games.html">Games</a>
          	</li>

          	<li>
          		
          		<li class="has-form">
          <div class="row collapse">
            <div class="large-8 small-9 columns">
            <input type="text" placeholder="What you looking for?">
          </div>
          <div class="large-4 small-3 columns">
            <a  style="background-color:red;" href="#" class="button expand">Search</a>
          </div>
        </li>

          	</li>

          </ul>

		</section>
	</nav>
</div>

<div class="row">
	<div class="large-12 medium-12 small-12 columns">
		<center><img src="Img/kids.jpg" width="500"></center>
	</div>
</div>

     
	<nav  style="text-align:center;" class="top-bar" data-topbar>
		<section style="display:inline-block;" class="top-bar-section">
		<ul class="center">
				<li>
				<a style="background-color: #003366; color:white;" href="#">Compertions</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="file:///C:/wamp/www/Kids%20Enterprise/events.html">Events</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="#">Lets Learn</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="#">Contact Us</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="#">Donate</a>
			</li>
		</ul>


		</section>
	</nav>
            

         

Undefined

As you can see in the code and the image i have two top-bars i'm having trouble with making to 1st top-bar stick to the second top-bar and scroll down the page together please help me find a solution thanks

topbar

<div class="sticky">
    <nav class="top-bar" data-topbar>
		<ul class="title-area">
			<li class="name"></li>
			<li class="toggle-topbar menu-icon">
				<a href="#">MENU</a>
			</li>
		</ul>
		<section class="top-bar-section">
			<ul class="left">
			
				<li>
					<a style="background-color: #003366;" href="#">Kids Enterprise</a>
				</li>

			</ul>

          <ul class="right">
          	<li>
          		<a  style="background-color: #003366;" href="file:///C:/wamp/www/Kids%20Enterprise/video.html">Videos</a>
          	</li>

          	<li>
          		<a  style="background-color: #003366;" href="#">Music</a>
          	</li>

             <li>
          		<a  style="background-color: #003366;" href="file:///C:/wamp/www/Kids%20Enterprise/games.html">Games</a>
          	</li>

          	<li>
          		
          		<li class="has-form">
          <div class="row collapse">
            <div class="large-8 small-9 columns">
            <input type="text" placeholder="What you looking for?">
          </div>
          <div class="large-4 small-3 columns">
            <a  style="background-color:red;" href="#" class="button expand">Search</a>
          </div>
        </li>

          	</li>

          </ul>

		</section>
	</nav>
</div>

<div class="row">
	<div class="large-12 medium-12 small-12 columns">
		<center><img src="Img/kids.jpg" width="500"></center>
	</div>
</div>

     
	<nav  style="text-align:center;" class="top-bar" data-topbar>
		<section style="display:inline-block;" class="top-bar-section">
		<ul class="center">
				<li>
				<a style="background-color: #003366; color:white;" href="#">Compertions</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="file:///C:/wamp/www/Kids%20Enterprise/events.html">Events</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="#">Lets Learn</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="#">Contact Us</a>
			</li>

			<li>
				<a style="background-color: #003366; color:white;" href="#">Donate</a>
			</li>
		</ul>


		</section>
	</nav>
            

         

Undefined

As you can see in the code and the image i have two top-bars i'm having trouble with making to 1st top-bar stick to the second top-bar and scroll down the page together please help me find a solution thanks

Rafi Benkual almost 3 years ago

You could do this but you'll be adding margin or padding to the 2nd topbar when it becomes fixed to space it below the topbar.

Like this:

// secondary-nav class added to 2nd topbar
.fixed + .secondary-nav {
  padding-top: 90px;
}

Not ideal, because the class is added after the first one overlaps it. There is probably a better way to do it with JS, involving calculating the height of the top-bar, finding it's bottom position based on scroll height, the adding the fixed class to the 2nd topbar.

My question though is why use two topbars? You can easily make a menu that is not topbar and make it positioned fixed with a single topbar.

How do you plan to handle the mobile menus?
Would you have two hamburger menus on small screens?
Do you think it would be confusing?

shaquel almost 3 years ago

u know what i didn't even think of that when they will stick together on a mobile device it will look confusing would you mind writing out a sample code so i can have an understanding on how you would do it i would be grateful.