Ask Your Question

How can the login form be added to the top navigation using Zurb Foundation?

asked 2021-06-16 11:00:00 +0000

nofretete gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2021-10-19 05:00:00 +0000

djk gravatar image

To add a login form to the top navigation using Zurb Foundation, follow these steps:

  1. Create a new HTML file and add the necessary Foundation stylesheet and JavaScript assets to the head section.
  <link rel="stylesheet" href="">
  <script src=""></script>
  1. Add the top navigation bar code to the body section of your HTML file. To create a navigation bar with a login form, you can use the following code:
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Site Title</a></h1>
    <section class="top-bar-section">
      <ul class="right">
        <li class="has-form">
          <div class="row collapse">
            <div class="small-8 columns">
              <input type="text" placeholder="Username">
            <div class="small-4 columns">
              <a href="#" class="button expand">Log In</a>

  <!-- Rest of your HTML code goes here -->
  1. Save the file and preview it in your web browser. You should now see a navigation bar at the top of your page with a login form on the right side. The login form is a text input field for the username and a button that says "Log In". You can customize the login form further by changing the style or adding more input fields.
edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2021-06-16 11:00:00 +0000

Seen: 7 times

Last updated: Oct 19 '21