display either 2 or 4 items on a line, not 3 Options

[busybody]

I have a header bar at the top of my website that has Event Calendar Pay Bill 1 Pay Bill 2. It works perfectly on all devices from phones to large screens, landscape or portrait. I now need to add a fourth option, Employment Options, and that spills to another line when I use my phone in portrait mode, in landscape it goes back to 1 line. Is there a way to always either show 1 line with 4 options or 2 lines with 2 options?

[pandy]

Probably. But it depends on what you have. Can you show us?

[busybody]

CODE

<div class="w3-bar w3-theme-d1 w3-right NonPrintable">
    <div class="w3-right w3-center example">
    <a href="/Employment.php" class="w3-bar-item w3-small w3-text-yellow"><b>Employment Options</b></a>
    <a href="/Calendar.php" class="w3-bar-item w3-small w3-text-yellow"><b>Event Calendar</b></a>
    <a href="https://pay.paygov.us/" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 1</b></a>
    <a href="https://www.invoicecloud.com" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 2</b></a>
    </div>
</div>

We use w3.css for almost all of our css.

This post has been edited by busybody: Apr 14 2020, 01:16 PM

[pandy]

Since everything inline, you could use 'white-space: norwrap' 'white-space: nowrap' with the DIV that contains the links.

[Christian J]

But that won't display them 2 on a line. But you could always create an extra DIV for each pair of links, and use 'white-space: nowrap' (note spelling) on those DIVs.

[busybody]

CODE

<div class="w3-bar w3-theme-d1 w3-right NonPrintable">
    <div class="w3-right" style="white-space:nowrap">
        <a href="https://pay.paygov.us/" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 1</b></a>
        <a href="https://www.invoicecloud.com" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 2</b></a>
    </div>
    <div class="w3-right" style="white-space:nowrap">
        <a href="/Employment.php" class="w3-bar-item w3-small w3-text-yellow"><b>Employment Options</b></a>
        <a href="/Calendar.php" class="w3-bar-item w3-small w3-text-yellow"><b>Event Calendar</b></a>
    </div>
</div>

This works but when I am in portrait mode on my phone or when I make my browser window smaller the div flips. So on my phone I see:
Pay Bill 1 Pay Bill 2
Employment Options Event Calendar

when I should see:
Employment Options Event Calendar
Pay Bill 1 Pay Bill 2

In landscape mode or full screen I see:
Employment Options Event Calendar Pay Bill 1 Pay Bill 2

Can I make it so the options are always in alphabetical order? Thank you for the help so far.

This post has been edited by busybody: Apr 14 2020, 09:43 PM

[pandy]

But that won't display them 2 on a line.

Thanks, forgot about that bit.

use 'white-space: nowrap' (note spelling)

Thanks again. Corrected the typo above in case someone copies.

[pandy]

This works but when I am in portrait mode on my phone or when I make my browser window smaller the div flips. So on my phone I see:
Pay Bill 1 Pay Bill 2
Employment Options Event Calendar

That's actually how I see it in a desktop browser even in a maxed window. I think you also need to float the new wrapper DIVs left.

when I should see:
Employment Options Event Calendar
Pay Bill 1 Pay Bill 2

In landscape mode or full screen I see:
Employment Options Event Calendar Pay Bill 1 Pay Bill 2

Can I make it so the options are always in alphabetical order? Thank you for the help so far.

They come in the order you have them in the HTML. You need to rearrange the links.

[busybody]

The order is correct when the screen is large enough to hold all 4 links. The order is not correct when the screen is small enough to trigger the nowrap.

[Christian J]

So on my phone I see:
Pay Bill 1 Pay Bill 2
Employment Options Event Calendar

That's what I get in my desktop browser too (haven't tried mobile).

when I should see:
Employment Options Event Calendar
Pay Bill 1 Pay Bill 2

To get that you simply need to switch the two grouping DIVs.

In landscape mode or full screen I see:
Employment Options Event Calendar Pay Bill 1 Pay Bill 2

Not me, are you sure about that? Could it be that any other CSS you use changes things around?

Can I make it so the options are always in alphabetical order?

You'd probably have to sort them in the HTML (though floating sometimes arranges content in unexpected ways).

[pandy]

The order is correct when the screen is large enough to hold all 4 links. The order is not correct when the screen is small enough to trigger the nowrap.

I have 32" screen. Do I need a larger one?