Responsive menu bar - menu items fit across the screen.

Check out my site:

My question:
1. I want to make the black menu bars line up with the side bar always.
2. I want the blue menu bars to stretch across the container and self adjust until padding is exhausted and then wrap.

Please help me with the CSS.

  • Patrick

    Hi @Mauri

    That's a bit tricky because all the list items are in the same #nav container. But let's see what we can do, shall we?

    To get those black ones to always line up with the sidebar, you would need to first give each of them their own custom class under Appearance > Menus so they can be styled independently. Perhaps gray_nav_1 and gray_nav_2.

    You'll want to add those custom class names to line 201 in your style-sheet so they inherit the background and width they have now. Also add this to the rules at line 201:

    Then add the following to your style-sheet to stick 'em where they are:

    #nav li.gray_nav_1 { right:1px; }
    #nav li.gray_nav_2 { right:113px; }

    That takes care of keeping them above the sidebar until we get down to the 768px viewports. And that's where things get wonky because they are still in the same #nav container as all the other menu list items.

    Ideally, you would use 2 different custom menus, and call them independently in your header.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.