Grow your CSS skills. Land your dream job.

Fluid Navigation Menu Problem

  • # February 9, 2013 at 6:04 am

    Hi All,
    So I have a problem that would be perfectly solved with Flexbox, but support seems to be so spotty that it is at this point no solution. I am trying to create a fluid navigation menu in which basically I need my menu item li elements to expand to fill up the space in a ul element that has its width set in percentages. What makes the project difficult is that the menu has a border along the top that becomes black for the current active menu item, and that top border needs to stretch all the way to the edge of the page and stay that way as the page is resized. So like [this](http://codepen.io/ezmiller/pen/hKqFI).

    This would be easily accomplished if I set the width of the li elements using percentages, but if I do that then I will have uneven spaces between the words that ends up looking ugly. The way to avoid spacing problems is by adding padding on the right. And this is where the problem arises: because that works for a fixed with nav menu but it does not work well if I set the padding with percentages. The percentages, which are based on the width of the partent element inevitably exceed the size of the containing element and then, causing a new row to be created.

    As I said, this could be easily resolved with flexbox, but the support seems so incomplete that it’s not advisable to use it. It does not even seem to work in Firefox, even when I use Compass/SASS mixins. And I haven’t been able to find a good fallback option either. Perhaps I have just missed something. If anyone has any ideas, I’d be grateful for suggestions.

    # February 9, 2013 at 7:18 am

    I’m not sure if I understand you the right way, but did you already tried “box-sizing:border-box;” ?
    It makes padding and borders on flexible elements a lot easier.

    # February 9, 2013 at 7:29 am

    @Scribblerockerz thanks for the comment! Actually, yes, all the elements on my site are set to use border-box. But in this case, I think, that cannot help because the whole problem is that I don’t want to set the width of the li menu items. Since the words in the navigation menu are different sizes, if I do that the spaces between them become irregular, which is what I’m trying to avoid…

    # February 9, 2013 at 8:29 am

    Maybe you scetch, how it should be and we try to figure out how to do that. At the moment, I have really no idea what you’re trying to do. Even with that codepen…

    # February 9, 2013 at 8:40 am

    Hmmmmm. It’s hard to explain in words. It should look like this at every screen width.

    ![Navigation Menu](http://img571.imageshack.us/img571/9875/screenshot20130209at235.png)

    In that code pen, I’ve achieved this by setting padding-right on the li elements using a percentage, but as the page is resized, it breaks — either the border line on the top comes off the edge of the screen, or the elements become wider than the containing ul element, and a second row is created.

    This could be avoided by setting the width of the li elements with a percentage, but if I do that, then the spacing between the navigation menus looks weird because of the different word lengths.

    Does that help?

    # February 9, 2013 at 9:21 am

    Okey, I think I know now what you trying to do.
    I just don’t understand why you will not to set a fiexed percentage width to the LIs?
    You could calculate the current pixel with to percentage and set it.

    currentPXwidthOfLI * 100 / CONTEXTorJUSTyourUL

    I tryed with this variables: 203 * 100 / 1011
    and I got **20.079129574678536**

    I formed a demoe out of your codepen: http://codepen.io/anon/pen/qIEbB

    I’m not sure how exactly the browser use this calculation, but you can use media queries to fix those +/-2px

    At the end I’m running out of ideas, I hope this was helpfull, if not then I’m sorry :)
    Good luck

    # February 9, 2013 at 9:32 am

    The problem is that if I set one fixed percentage width for all the LI elements, then the spacing between the words becomes irregular. The reason for that is that while the LI elements are equal width, the words in them are of variable lengths. The only way around this would be to set a distinct percentage for each li element, which is not an ideal solution I don’t think, although if I have to resort to that I suppose I will. Well thanks for your help @Scribblerockerz!

    # February 9, 2013 at 9:52 am

    >I will have uneven spaces between the words that ends up looking ugly.

    This might seem to be an issue for you but I assure that list items with different widths is much worse from aesthetics (UI) and UX points of view.

    # February 9, 2013 at 11:14 am

    @Paulie_D hmmmm…that’s interesting. I had not thought about it that way. My client was complaining about the unequal spacing. But that mostly was the result of the fact that the last nav menu item had a really long title “Contact / Bookings”, whereas all the others were single words. That also meant that I was assigning a separate and different width to the last menu item. Maybe what I need to do is get my client to decide on a single-word menu label?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".