Menu icon Foundation
Top-Bar design

I need some help with the top-bar section on Foundation.

1) I'm trying to increase the height of the top-bar to 65px.

2) Trying to get the Hover over the navigation links with a full height background color. 

3) Trying to get the Large screen to show a full-width horizontal drop down menu instead of the current vertical sub menu.

 

Here is the HTML

<nav>
  <div class="row">
    <div class="small-12 medium-12 large-12 columns">
      <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div class="top-bar" id="example-menu">
        <div class="top-bar-left">
        <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
            <li><a href="http://indigrowth.com">Logo</a></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="vertical medium-horizontal menu"   data-responsive-menu="drilldown medium-dropdown">
            <li><a href="#">Home</a>
              <ul class="menu vertical">
                <li><a href="#">Problems we solve</a></li>
                <li><a href="#">Who uses us</a></li>
                <li><a href="#">Why us</a></li> 
              </ul>
            </li>
            <li><a href="#">Problems we solve</a></li>
            <li><a href="#">Solutions we offer</a>
              <ul class="menu vertical">
                <li><a href="#">How to use us</a></li>
                <li><a href="#">Services</a></li> 
                <li><a href="#">Case Studies</a></li>               
              </ul>
            </li>          
            <li><a href="#">About</a>
              <ul class="menu vertical">
                <li><a href="#">What we do</a></li>
                <li><a href="#">Team</a></li> 
              </ul>
            </li>                    
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>    
</nav>

I've attached an image to show what I've been trying to get without any success.

Foundation top-bar

 

top-bartopbarnavigationvertical menuF6 top-barmenutitle-bar

I need some help with the top-bar section on Foundation.

1) I'm trying to increase the height of the top-bar to 65px.

2) Trying to get the Hover over the navigation links with a full height background color. 

3) Trying to get the Large screen to show a full-width horizontal drop down menu instead of the current vertical sub menu.

 

Here is the HTML

<nav>
  <div class="row">
    <div class="small-12 medium-12 large-12 columns">
      <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div class="top-bar" id="example-menu">
        <div class="top-bar-left">
        <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
            <li><a href="http://indigrowth.com">Logo</a></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="vertical medium-horizontal menu"   data-responsive-menu="drilldown medium-dropdown">
            <li><a href="#">Home</a>
              <ul class="menu vertical">
                <li><a href="#">Problems we solve</a></li>
                <li><a href="#">Who uses us</a></li>
                <li><a href="#">Why us</a></li> 
              </ul>
            </li>
            <li><a href="#">Problems we solve</a></li>
            <li><a href="#">Solutions we offer</a>
              <ul class="menu vertical">
                <li><a href="#">How to use us</a></li>
                <li><a href="#">Services</a></li> 
                <li><a href="#">Case Studies</a></li>               
              </ul>
            </li>          
            <li><a href="#">About</a>
              <ul class="menu vertical">
                <li><a href="#">What we do</a></li>
                <li><a href="#">Team</a></li> 
              </ul>
            </li>                    
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>    
</nav>

I've attached an image to show what I've been trying to get without any success.

Foundation top-bar

 

Ryan Patterson about 2 years ago

Hi Wyeth,

So I would have to play around with the code to figure out how to get the submenu to span the full width of the content area. 

As for making the submenu horizontal rather than vertical. You can do this easily by replacing .vertical with .horizontal on your sub-menu UL's. 

Also, this is unrelated to your question, but you probably don't need to put your logo in a drilldown/dropdown menu with the logo being the only list item. Just a thought. 

I'll do a test and see if I can get the submenu to span full width.

 

Thanks, 

Ryan

Ryan Patterson about 2 years ago

Wyeth,

 

Sorry, forgot to address your question about the topbar height. I don't believe there is a height set on the top-bar, it gets it's height from the content + padding. So you could adjust the topbar padding or content's size and margin/padding to get the height you are looking for. However, the height may change depending on whether or not any content has to wrap when resizing the screen. This is why wouldn't want a fixed height.

I you're using SASS, there is a sass variable for the topbar padding, called $topbar-padding. If using plain old css, just adjust padding on .top-bar.

 

****EDITED****

 

Based off of your screenshot, you may have to adjust the padding on your navigation menu's anchor tags or li (depends on if you just want the text to be clickable), so that when you hover, the background fills the entire topbar. This would also mean you might need to remove the padding from the top bar, and add the difference to the anchor tags. 

 

So if your navigation menu's anchor tags or li's are lets say 20px tall (thats font size and line height factored in), you would need to add 1.40625rem (22.5px) of both top and bottom padding. That would create 45px of total padding, add that to your 20px tall nav items, and it would make your topbar 65px tall (if you removed topbar padding altogether)

 

Hope that helps. 

Wyeth Myers about 2 years ago

Hi Ryan,

 

Thank you for your replies and I'll incorporate the instructions given by you.

 

I did find a way to increase the height. All I had to do was increase the line-height of:

.top-bar,

.top-bar ul

 {

    line-height: 65px;

}

.top-bar ul li a{

    line-height: 65px;

}

.top-bar ul li a:hover{

    line-height: 65px;

}

top-bar line height

 

Which still brings me to the horizontal sub-menu for large screens. I've changed the class from vertical to horizontal but still doesn't work.

The reason why I'm being so specific is if I have to build a sub-menu using a horizontal pane full-width using my own CSS, then I might as well use the HTML5 boilerplate instead of Foundation.

One of the reasons I love using Foundation is it saves me a lot of time, however this is one situation which has me literally tearing my hair out.