Menu icon Foundation
Foundation 5 top nav bar input resizing problem

Im using top nav bar and resized height of it to 34 px in _settings.scss. But, buttons, inputs, search box's height not auto resized. I used ;

// Control Input height for top bar
// $topbar-input-height: 2.45em;

above field to change height, but nothing happend.

Findit

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en" style="" data-useragent="Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36"><!--<![endif]--><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation project</title>
    <!-- build:css css/font-awesome.min.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/app_override.css">
    <!-- build:js js/vendor/modernizr.js -->
    <script src="bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
  <meta class="foundation-mq-small"><meta class="foundation-mq-medium"><meta class="foundation-mq-large"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-xxlarge"><style></style><meta class="foundation-mq-topbar"></head>
  <body style="">

  <div class="row">
      <div class="columns large-12">
          <nav class="top-bar" data-topbar="">

                  <ul class="title-area">
                      <li class="name">
                          <h1><a href="#">Something</a></h1>
                      </li>
                      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
                  </ul>


                  <section class="top-bar-section">
                      <!-- Right Nav Section -->
                      <ul class="right">
                          <li class="active"><a href="#">Right Button Active</a></li>
                          <li class="has-dropdown not-click">
                              <a href="#">Right Button with Dropdown</a>
                              <ul class="dropdown"><li class="title back js-generated"><h5><a href="#">Back</a></h5></li>
                                  <li><a href="#">First link in dropdown</a></li>
                              </ul>
                          </li>
                      </ul>

                      <!-- Left Nav Section -->
                      <ul class="left">

                          <!-- Search | has-form wrapper -->
                          <li class="has-form">
                              <div class="row collapse">
                                  <div class="large-8 small-9 columns">
                                      <input type="text" placeholder="Find Stuff">
                                  </div>
                                  <div class="large-4 small-3 columns">
                                      <a href="#" class="alert button expand">Search</a>
                                  </div>
                              </div>
                          </li>
                          <li class="has-form">
                              <a class="button">Test</a>
                          </li>
                      </ul>
                  </section>

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

    <!-- build:js js/vendor/jquery.min.js -->
    <script src="bower_components/jquery/jquery.min.js"></script>
    <!-- endbuild -->
    <!-- build:js js/foundation/foundation.min.js -->
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <!-- endbuild -->
    <script src="js/app.js"></script>


</body></html>

topbarsearchinput

Im using top nav bar and resized height of it to 34 px in _settings.scss. But, buttons, inputs, search box's height not auto resized. I used ;

// Control Input height for top bar
// $topbar-input-height: 2.45em;

above field to change height, but nothing happend.

Findit

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en" style="" data-useragent="Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36"><!--<![endif]--><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation project</title>
    <!-- build:css css/font-awesome.min.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/app_override.css">
    <!-- build:js js/vendor/modernizr.js -->
    <script src="bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
  <meta class="foundation-mq-small"><meta class="foundation-mq-medium"><meta class="foundation-mq-large"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-xxlarge"><style></style><meta class="foundation-mq-topbar"></head>
  <body style="">

  <div class="row">
      <div class="columns large-12">
          <nav class="top-bar" data-topbar="">

                  <ul class="title-area">
                      <li class="name">
                          <h1><a href="#">Something</a></h1>
                      </li>
                      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
                  </ul>


                  <section class="top-bar-section">
                      <!-- Right Nav Section -->
                      <ul class="right">
                          <li class="active"><a href="#">Right Button Active</a></li>
                          <li class="has-dropdown not-click">
                              <a href="#">Right Button with Dropdown</a>
                              <ul class="dropdown"><li class="title back js-generated"><h5><a href="#">Back</a></h5></li>
                                  <li><a href="#">First link in dropdown</a></li>
                              </ul>
                          </li>
                      </ul>

                      <!-- Left Nav Section -->
                      <ul class="left">

                          <!-- Search | has-form wrapper -->
                          <li class="has-form">
                              <div class="row collapse">
                                  <div class="large-8 small-9 columns">
                                      <input type="text" placeholder="Find Stuff">
                                  </div>
                                  <div class="large-4 small-3 columns">
                                      <a href="#" class="alert button expand">Search</a>
                                  </div>
                              </div>
                          </li>
                          <li class="has-form">
                              <a class="button">Test</a>
                          </li>
                      </ul>
                  </section>

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

    <!-- build:js js/vendor/jquery.min.js -->
    <script src="bower_components/jquery/jquery.min.js"></script>
    <!-- endbuild -->
    <!-- build:js js/foundation/foundation.min.js -->
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <!-- endbuild -->
    <script src="js/app.js"></script>


</body></html>

Eric gave the most helpful answer for this post
Eric over 5 years ago

I don't have that line in my _settings.scss but adding this line to my app.scss worked.

.top-bar input { height: 45px; }
```

This post has been closed. No new replies can be added.

Eric over 5 years ago

Try removing the two '//' before the line. The '//' comments out the line.

So from this:

// $topbar-input-height: 2.45em;

To this:

$topbar-input-height: 2.45em;

Rahman Usta over 5 years ago

Of course, i commented out it Eric, this is only sharing. i changed 2.45 to lower than it, but it has no effect.

Eric over 5 years ago

I don't have that line in my _settings.scss but adding this line to my app.scss worked.

.top-bar input { height: 45px; }
```

Rafi Benkual over 5 years ago

Not sure what is causing it to be off. Took your code and it looks fine http://cdpn.io/elELt

What @eric wrote worked for me as well.

There is no scss setting for this. We removed the comment in the settings file to alleviate confusion.