CODEWITHSUNDEEP
cssmobilenavigation
vega
vega

Reputation: 127

CSS gap in mobile navigation menu (only watchable on mobile device)

I am working on a responsive navigation and trying to get a responsive design to work.

Now, if you watch the website with a mobile device and you click on the menu button in the left corner the menu drops down, which is working fine. My problem is, there is a gap in between the last part of a sub-menu and the next main menu item ... and for the love of god I just can not find the solution to get that gap lost. :(

You can check the website on your mobile device here: http://bit.ly/1Hwbn94

CSS code:

#menue {visibility: visible; z-index: 99999;}
nav ul, nav:active ul {margin: 0; display: none; position: absolute; padding: 0; width: 0; height: 37.5rem; z-index:99998; padding: 0;}
#nav ul, div.menu ul {list-style: none; margin: 6.25rem 0 0 0; padding: 0;}
#nav ul ul {display: block; position: relative; margin: 0; padding: 0; z-index: 99998;}
#nav ul ul a {display: block; padding: 0 50px 0 0; margin: 0; background: rgba(200, 200, 200, .97); color: black; text-decoration: none; text-align: right; font-size: 3.125rem; line-height: 7.5rem;}
nav li {text-align: right; padding: 0; margin: 0; width: 800px;}
nav:hover ul {display: block; padding: 0; margin: 0;}
#nav a {color: black; display: block; padding: 0 3rem 0 0; text-decoration: none; background: rgba(200, 200, 200, .97); margin: 0; font-size: 3.125rem; line-height: 9rem;}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {background: rgba(255, 255, 255, .99);}
#nav ul.sub-menu {width: 600px; margin: 0; padding: 0;}
#nav ul.sub-menu li {float: none; display: block; margin: 0; padding: 0;}

I do not know, how I did get that gap, but maybe someone different can see the problem/issue. Thanks a lot in advance.

Upvotes: 1

Views: 210

Answers (2)

Jeff Clarke
Jeff Clarke

Reputation: 1397

Your "#nav ul.sub-menu" rule is inheriting a height of 37.5rem from the "nav ul, nav:active ul" rule, which is bigger than the required height for the sub menu. Adding "height:auto" to the "#nav ul.sub-menu" class got rid of the gap for me.

Upvotes: 3

BradleyIW
BradleyIW

Reputation: 1358

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

W3C Reccomends using Display:Inline for horizontal navigation elements.

and Display:Block for vertical navigation, you seem to be using display:inline-block, try changing that.

Upvotes: 1

Related Questions