Gap appearing in navigation bar and dropdown

Question

I can't seem to solve the 'gap' that appears below my navigational tabs
Also can somebody please help me with a drop down navigation? I need to put 3 subheadings under SHOP, 2 subheadings under DISCOVER and 3 subheadings under EDGE CLUB. I'm too confused with the multiple < li > and < ul > !

This is my first time and thanks in advance ...

.navigation {
 background-color: #454242;
 text-align:center;
}

ul.menu {
 height: 43px;
 background-color: #454242;
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 transition: 1.0s;
 font-family: 'Lato', sans-serif;
 font-weight:400;
 display:inline-block;
 text-align: center;
}

ul.menu li {
 float: left;
 display: inline;
}

ul.menu li a {
 display: inline-block;
 color: #FFFFFF;
 text-align: center;
 padding: 10px 20px;
 text-decoration: none;
 transition: 1.0s;
 font-size: 17px;
 height: 23px;
}

ul.menu li a:hover {
 background-color: #FFFFFF;
 color: black;
}

ul.menu li a:active {
 background-color: #FFFFFF;
 color: black;
}

ul.menu li.icon {
 display:none;
}

@media screen and (max-width: 680px) { 
ul.menu li:not(:first-child){
 display:none;
 margin: auto;
 float: left;
}
 
ul.menu li.icon {
 display: inline;
 float: left;
 position: absolute;
 left: 0px;
 text-align: left;
}
}

@media screen and (max-width: 680px) {
 
ul.menu.responsive li.icon {
 
 float: left;
 position: absolute;
 text-align: left;
 color: black;
}
 
ul.menu.responsive{
 position: relative;
 height: 258px;
 transition: 1.0s;
 width: 100%
}
 
ul.menu.responsive li{
 float: none;
 display: inline;
 
}
 
ul.menu.responsive li a{
 display:block;
 text-align: center;
} 
}

<div class="navigation col-12">
<ul class="menu">
<li class="icon">
<a href="javascript:void(0);"onClick="dropdownMenu()">&#9776;</a></li>
<li> <a href="test.html">Home</a></li>
<li> <a href="test.html">Eat</a></li>
<li> <a href="test.html">Shop</a></li>
<li> <a href="test.html">Discover</a></li>
<li> <a href="test.html">Edge Club</a></li>
<li> <a href="test.html">Contact</a></li>
</ul>
</div>

<script>
function dropdownMenu() {
 document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>

score 0 · Accepted Answer · answered Jul 21 '16 at 18:54

Inline elements automatically have space applied around them. Because ul-menu is defined as inline-block, it receives this treatment. This space is the gap below the tabs.

To remove the space, change display back to block and then you can center it using width and margin:auto.

As for subheadings, you will need to nest lists and apply similar styles. Here's a good example.

score 0 · Answer 2 · answered Jul 21 '16 at 19:09

0

You can set display: inline-flex for ul.menu

answered Jul 21 '16 at 19:09

Tejeshvi Roy

146
6

score 0 · Answer 3 · edited May 23 '17 at 10:28

(1) here's a JSFiddle: https://jsfiddle.net/51ueowx7/1/

there was only two updates to the css in order to remove issues caused by whitespace

ul.menu{
    display: table;
    margin: auto;
}

possible dupe: How to remove the space between inline-block elements?

(2)

The first step I would take would be to remove the anchors. Considering you don't want every click to navigate to another page, it would likely be preferential to assign click handlers.

You're already familiar enough with lists to be able to nest them, I believe a little bit of formatting would be significantly helpful in this scenario:

<li id="shop">
    <p>Shop</p>
    <ul class="shop-subheadings">
        <li>Subheading 1</li>
        <li>Subheading 2</li>
        <li>Subheading 3</li>
    </ul>
</li>

to start you would likely want:

ul.shop-subheadings{
    display: none;
}

You may then add/use classes || IDs in order to assign click functionality.

$("#shop").click(function(){
    $("ul.shop-subheadings").show();
})

Here's a rough start: https://jsfiddle.net/51ueowx7/8/

Gap appearing in navigation bar and dropdown

3 Answers3