Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Building Out WordPress Navigation Coding A Basic Navigation in WordPress

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

!Foundationnav

Hey. I have a menu I wrote with the help of foundation and I want to make it suitable for wordpress in phpforthistheme I followerd the course of wordpress theme development, but cannot figure out how the styles are written. I want it to look like this Imgur

 <!-- Navigation -->
    <div class="fixed">
      <nav class="top-bar">
        <ul class="title-area">
            <li class="name">
              <h1>
                <a href="#">Integrera Jonkoping</a>
              </h1>
             </li>

            <li class="toggle-topbar menu-icon"><a href=""><span></span></a> </li>
          </ul>


        <section class="top-bar-section">
          <ul class="right">
            <li><a href="#">Hem</a></li>
            <li><a href="#">Om Oss</a></li>
            <li><a href="#">Blog</a></li>

            <li class="has-dropdown">
              <a href="#">Praktik och Arbete</a>
               <ul class="dropdown">
                 <li><a href="#">Lediga jobb och praktikplatser</a></li>
                  <li><a href="#">Regler</a></li>
                </ul>
             </li>



             <li class="has-dropdown">
              <a href="#">Projekt</a>
                <ul class="dropdown">
                  <li><a href="#">Pågående projekt</a></li>
                  <li><a href="#">Avslutade projekt</a></li>
                </ul>
            </li>

             <li>
              <a href="#">Swedish Language</a>
              <ul class="dropdown">
                  <li><a href="#">Online</a></li>
                  <li><a href="#">Ordböker</a></li>
                  <li><a href="#">Språkcafe</a></li>
                  <li><a href="#">Media</a></li>
                  <li><a href="#">Studieförbunder</a></li>
                  <li><a href="#">Böker</a></li>
                </ul>
            </li>

            <li><a href="#">Kalendar</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </section>
      </nav>
  </div>
    <!-- End Navigation -->

1 Answer

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

I guess since then you've found a way to achieve it, but if you want to have some examples on the way to build navs using foundation, you can check this page -> http://foundation.zurb.com/templates.html