0

I have tried a hundred different combinations for my menu bar (secondary-menu) to wrap in two rows when viewed in smaller browser screen or device.

The last one I tried was this: 

@viewport {
width: device-width;

@media only screen and (min-width : 375px) and (max-width : 667px) {
    .secondary-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

Can someone please help me fix this code or write another one that automatically shows two rows for the top green menu bar with all buttons on a smaller screen? (The rest of my site is responsive so I don't need to make this work for the whole site, just this element.)

trying to create my website
  • 9
  • 4
  • http://stackoverflow.com/a/37844240/3597276 – Michael Benjamin Jul 07 '16 at 14:00
  • 2
    Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce **it in the question itself**. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Pete Jul 07 '16 at 14:00
  • Hi. This is just to point you in the hopefully right direction. Try playing with the fixed position, whitespace nowrap and display. .secondary-menu ul { height: 35px; /* position: fixed; */ top: 0; background-color: #0e6e3e; margin: 0 -9999rem; padding: .25rem 9999rem; /* white-space: nowrap; */ overflow: hidden; display: inline; } Note that I commented out position fixed and white-space nowrap. – Vcasso Jul 07 '16 at 16:01

1 Answers1

-2

You should first add “height:auto” to your ".secondary-menu ul" class definition.

Then you should add “float:left” to your current stylesheet class, so the class will end up like this:

.boldgrid-framework-menu li, .footer-center-menu li {
    list-style: none;
    display: inline;
    list-style-type: none;
    float: left;
}

Now when i scale your site, the buttons automatically appear on another row.

Gabe Hiemstra
  • 269
  • 1
  • 14