Wow. That post is messed up. Here’s a redo with a sequel!
I am working on http://dev.stuffadjust.com/ and am having trouble making the top navigation wider. At the moment I have it pushed over to the left, which is almost as far as I would like it to be, but something else (the grid??) then caused it to increase the right margin and jumped it to two lines. I don’t know if it is possible but I am trying to make room for all pages to be displayed on the one line.
An alternative to this approach would be to relocate the main navigation to a sidebar, preferably on the left to maintain the flow for mobile.
You need to remove the right margin on your .main-navigation class. So, you’d need to change it to something like…
.main-navigation {
margin: 45px 0 0;
margin: 2.8125rem 0 0;
}
After doing this, all those menu items should fit on one row.
Thanks, that worked. It’s also the first time I have encountered a CSS position with only three values. I looked into it and have already used it on another site — very cool. Thank you
My pleasure. Glad it’s all sorted 🙂
