Skip to content

Instantly share code, notes, and snippets.

@robneu
Last active May 21, 2018 20:45
Show Gist options
  • Select an option

  • Save robneu/0ad283737d80802cb0e0 to your computer and use it in GitHub Desktop.

Select an option

Save robneu/0ad283737d80802cb0e0 to your computer and use it in GitHub Desktop.
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

robneu commented Jul 31, 2014

Copy link
Copy Markdown
Author

Before

After

@davechu

davechu commented Jul 31, 2014

Copy link
Copy Markdown

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 commented Mar 23, 2016

Copy link
Copy Markdown

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

Thanks again!

@Stefaan5

Stefaan5 commented Jun 9, 2016

Copy link
Copy Markdown

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

@tanyaslogos

Copy link
Copy Markdown

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

Copy link
Copy Markdown

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

@roiemiz

roiemiz commented Nov 8, 2016

Copy link
Copy Markdown

Thank you my friend!

@GatoGordoGordo

Copy link
Copy Markdown

Thank you! It was drawing me crazy!

@claytonschase

Copy link
Copy Markdown

Amazing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment