How to remove gap between menu

Question

I made this page in wordpress and foundation.I want to change the below menu :

into this:

My css to override foundation's app.css is as below:

.top-bar-section li
{
    width:150px;
    word-wrap:break-word;
    border-bottom: solid 1px #BC9633;
    float:left;
}

PART OF app.css

.top-bar-section li:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;background:#ffffff;}.top-bar-section li:not(.has-form) a:not(.button):hover {border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;color:#000000;border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button):hover {background:#BC96633;color:#000000;}

HTML

<div class="menu-wrapper">
    <div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <!--<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>-->
               <a href="<?php echo home_url(); ?>"><img src="img/fspb_logo.png" width="165" height="145" ></a>
            </li>

        </ul>
        <section class="top-bar-section" style="padding-top:55px;">

//below two lines display the menu

        <?php foundationPress_top_bar_l(); ?>
        <?php foundationPress_top_bar_r(); ?>


        </section>

    </nav>



</div>
</div>

***** I removed padding:0 15px;line-height:45px; from .top-bar-section li..and it turned out to be below:

How do I push the long menu up pls?

Answer 1

You could also check the padding/margin on the as well. That might be where the issue is. Or the line-height. Kind of hard to pinpoint the exact problem without the full source (html and css of the problem area). Hope that helps!

Answer 2

CSS

 .top-bar-section li
{
    width:150px;
    word-wrap:break-word;
    border-bottom: solid 1px #BC9633;
    float:left;
    padding-bottom: 0px;
    line-height: 20px;
} 

Answer 3

Below is my updated css .top-bar-section li

{
    width:103px;
    /*word-wrap:break-word;*/
    white-space:word-wrap;
    border-bottom: solid 1px #BC9633;
    float:left;
    padding-top : 0; padding-bottom: 0; margin-bottom: 0; 
    margin-right:10px;
    height:35px;
    line-height:11px;
}

It turned out better than before and solved my problem. It's just that The ABOUT FSPB looks a bit weird. Only if the words can be used to stretch the line taking up by the line underneath it would be better. If anyone knows how to do that, pls feel free.Thanks all.

Answer 4

There is no Foundation way to accomplish this. You can either us a css positioning or a table valign approach depending on your goals. Here is a SO post that describes how to accomplish both.