Menu icon Foundation
How to make a Bootstrap menu in Foundation?

Hi there! I want to make a responsive top-bar menu with collapsing exactly the same way as I have it in Bootstrap. Could anyone tell me, how to do that? In the code below, there is my main index file and css styling.

<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Logo</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my_navbar" aria-expanded="false">
                <span></span>
	        <span></span>
	        <span></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="my_navbar">
            <ul class="nav navbar-nav navbar-right">
	        <li><a href="#" data-link="#home">Home</a></li>
	        <li><a href="#" data-link="#about">About</a></li>
	        <li><a href="#" data-link="#skills">Skills</a></li>
	        <li><a href="#" data-link="#resume">Resume</a></li>
	        <li><a href="#" data-link="#portfolio">Portfolio</a></li>
	        <li><a href="#" data-link="#testimonial">Testimonials</a></li>
	        <li><a href="#" data-link="#blog">Blog</a></li>
	        <li><a href="#" data-link="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
nav {
	height: 100px;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 97;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

nav .navbar-header .navbar-brand {
	height: 100px;
	padding: 30px 15px;
	font-size: 1.6em;
	font-weight: 900;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

nav .navbar-nav {
	width: 60%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

nav .navbar-nav > li > a {
	font-size: 0.9em;
	letter-spacing: 1px;
	margin: 30px 0;
	padding: 0;
	color: #fff !important;
	opacity: 0.9;
	-webkit-transition: margin .5s ease-in-out;
	transition: margin .5s ease-in-out;
}

nav.active {
	height: 60px;
	background-color: rgba(0,0,0,0.95);
	box-shadow: 0 1px 1px #1e3244;
}
nav.active .navbar-header .navbar-brand {
	height: 60px;
	padding: 20px 15px;
}
nav.active .navbar-nav > li > a {
	margin: 20px 0;
}
nav .navbar-nav > li > a:hover,
nav .navbar-nav > li > a:focus,
nav .navbar-nav > li > a.current {
	background-color: transparent !important;
	color: #000000 !important;
}

top-barmain-menutitle-barBootstrapFoundationstickycontainer

Hi there! I want to make a responsive top-bar menu with collapsing exactly the same way as I have it in Bootstrap. Could anyone tell me, how to do that? In the code below, there is my main index file and css styling.

<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Site Logo</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my_navbar" aria-expanded="false">
                <span></span>
	        <span></span>
	        <span></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="my_navbar">
            <ul class="nav navbar-nav navbar-right">
	        <li><a href="#" data-link="#home">Home</a></li>
	        <li><a href="#" data-link="#about">About</a></li>
	        <li><a href="#" data-link="#skills">Skills</a></li>
	        <li><a href="#" data-link="#resume">Resume</a></li>
	        <li><a href="#" data-link="#portfolio">Portfolio</a></li>
	        <li><a href="#" data-link="#testimonial">Testimonials</a></li>
	        <li><a href="#" data-link="#blog">Blog</a></li>
	        <li><a href="#" data-link="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
nav {
	height: 100px;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 97;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

nav .navbar-header .navbar-brand {
	height: 100px;
	padding: 30px 15px;
	font-size: 1.6em;
	font-weight: 900;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

nav .navbar-nav {
	width: 60%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

nav .navbar-nav > li > a {
	font-size: 0.9em;
	letter-spacing: 1px;
	margin: 30px 0;
	padding: 0;
	color: #fff !important;
	opacity: 0.9;
	-webkit-transition: margin .5s ease-in-out;
	transition: margin .5s ease-in-out;
}

nav.active {
	height: 60px;
	background-color: rgba(0,0,0,0.95);
	box-shadow: 0 1px 1px #1e3244;
}
nav.active .navbar-header .navbar-brand {
	height: 60px;
	padding: 20px 15px;
}
nav.active .navbar-nav > li > a {
	margin: 20px 0;
}
nav .navbar-nav > li > a:hover,
nav .navbar-nav > li > a:focus,
nav .navbar-nav > li > a.current {
	background-color: transparent !important;
	color: #000000 !important;
}
Rafi Benkual over 2 years ago

You might check out building blocks for a premade navigation you can use: http://foundation.zurb.com/building-blocks/

Jade about 2 years ago

Has anyone ever done this before? Implemented a Bootstrap menu in Foundation? I need to swap out the Foundation menu because nobody likes FOUC (too many complaints about it).