Menu icon Foundation
Top Bar on Mobile

Hi there,
I'm using Top Bar plugin for making my one-page website menu to be responsive.

The problem is that on mobile, when i click on the menu it's brings me back to the top of the page...

    <header id="menu" class="fixed">
    	<nav class="upper-menu top-bar" data-topbar role="navigation">
			<ul class="title-area">
    			<li class="name"></li>
    			<li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
  			</ul>
  			<section class="top-bar-section">
				<ul>
					<li><a href="#welcome">Home</a></li>
					<li><a href="#about">About Me</a></li>
					<li><a href="#resume">Resume</a></li>
					<li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#contact">Contact Me</a></li>
				</ul>
			</section>
		</nav>
	</header>

	<section id="welcome" class="row page welcome-page">
		<!-- Welcome Page -->
		<div class="columns small-12 medium-6">
			
		</div>
		<div class="columns small-12 medium-6">
			
		</div>
	</section>
	<section id="about" class="row page about-page">
		<!-- About Us Page -->
	</section>
	<section id="resume" class="row page resume-page">
		<!-- Resume Page -->
	</section>
	<section id="portfolio" class="row page portfolio-page">
		<!-- Portfolio Page -->
	</section>
	<section id="contact" class="row page contact-page">
		<!-- Contact Page -->
	</section>

menutop barResponsivemobile

Hi there,
I'm using Top Bar plugin for making my one-page website menu to be responsive.

The problem is that on mobile, when i click on the menu it's brings me back to the top of the page...

    <header id="menu" class="fixed">
    	<nav class="upper-menu top-bar" data-topbar role="navigation">
			<ul class="title-area">
    			<li class="name"></li>
    			<li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
  			</ul>
  			<section class="top-bar-section">
				<ul>
					<li><a href="#welcome">Home</a></li>
					<li><a href="#about">About Me</a></li>
					<li><a href="#resume">Resume</a></li>
					<li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#contact">Contact Me</a></li>
				</ul>
			</section>
		</nav>
	</header>

	<section id="welcome" class="row page welcome-page">
		<!-- Welcome Page -->
		<div class="columns small-12 medium-6">
			
		</div>
		<div class="columns small-12 medium-6">
			
		</div>
	</section>
	<section id="about" class="row page about-page">
		<!-- About Us Page -->
	</section>
	<section id="resume" class="row page resume-page">
		<!-- Resume Page -->
	</section>
	<section id="portfolio" class="row page portfolio-page">
		<!-- Portfolio Page -->
	</section>
	<section id="contact" class="row page contact-page">
		<!-- Contact Page -->
	</section>
Dor Zuberi about 5 years ago

I've forgot to add the js function:

 ``` $( document ).ready( function() {
      $( "#menu .top-bar-section li a" ).click( function ( e ){
        e.preventDefault();

        var sectionID = $( this ).attr( "href" );

        $( "html, body" ).animate({ scrollTop: $( sectionID ).offset().top - $( "#menu" ).height() } , 2000);

      } );
    } );

Dor Zuberi about 5 years ago

figured it out, i've added the option "scrolltop : false" to the foundation js init...

Rafi Benkual about 5 years ago

Nice, top-bar wasn't created with a single page app in mind. Glad you got a solution.