Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Remove unwated space from nav elements on Genesis themes.
/**
* The Default Genesis styles have a bug which causes extra unwanted
* space to display in the nav menu bar elements. This will remove the
* extra space cross-browser. The reason for the strange .001px font size
* is due to a bug on older Andorid devices.
*
* Note: I've used the default Genesis styles here as an example. The only
* actual change is the font-size rule on both selectors.
*
* Reference link: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
* Android Bug link: http://codepen.io/SelenIT/pen/HIika
*/
.genesis-nav-menu {
clear: both;
font-size: .001px;
line-height: 1;
width: 100%;
}
.genesis-nav-menu .menu-item {
display: inline-block;
font-size: 16px;
text-align: left;
}
@robneu

This comment has been minimized.

Copy link
Owner Author

commented Jul 31, 2014

Before

After

@davechu

This comment has been minimized.

Copy link

commented Jul 31, 2014

Rob, Very cool! I helped someone on the forum with this the other day. My fix was just to replace "display: inline;" with "float: left;" and the person was happy. Of course, the caveat is that in some contexts your fix may be better if the float were to mess with something else.

@ghost

This comment has been minimized.

Copy link

commented Mar 23, 2016

You are awesome! Thank you for adding this. Wonderful fix to that annoying padding :-) 💯 👍

Thanks again!

@Stefaan5

This comment has been minimized.

Copy link

commented Jun 9, 2016

I've literary spent hours trying to fix this! Thank you for this!

@tanyaslogos

This comment has been minimized.

Copy link

commented Aug 7, 2016

GENIUS!!!! I would have never in a billion years thought to do that. You have restored my sanity - life is once more worth living. lol

THANK YOU THANK YOU THANK YOU!!!

@webmatter

This comment has been minimized.

Copy link

commented Oct 21, 2016

Thank you so much for this!! I was already about pulling my hair out because of this unwanted space.

@roiemiz

This comment has been minimized.

Copy link

commented Nov 8, 2016

Thank you my friend!

@GatoGordoGordo

This comment has been minimized.

Copy link

commented Mar 25, 2018

Thank you! It was drawing me crazy!

@claytonschase

This comment has been minimized.

Copy link

commented May 21, 2018

Amazing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.