[Solved] Get full width nav to flex dynamically

[jknetdesign]

Below the slidehshow there is three blue rectangular tabs. This theme has a dynamic breakpoint that is constantly flexing.

It looks good when it’s full width but when you squeeze browser they break.

I tried this on a media query
.ulink { width: 33.15% !important; }

http://new-publicwaternow.nationbuilder.com/

[Shikkediel]

This seems to work alright :

.ulink {
white-space: nowrap;
}

[jknetdesign]

I tried to add white-space: nowrap; to the ulink class and no change. Any ideas?

[Shikkediel]

Looks changed to me, the text is not wrapping anymore. I guess you were referring to something else.

[Shikkediel]

something else

That would be the margin-right: 3px on .ulink which is breaking things. The text wrap didn’t look right on smaller screens.

[kwerty]

Here’s the css rule you might be looking for

.ulink {
    border-right: 3px solid #fff;
    display: block;
    float: left;
    height: 40px;
    text-align: center;
    width: 33.333%;
}

.ulink:last-child {
    border-right: 0;
}

Thanks.

[jknetdesign]

Got it! I also needed display: block

[Author]

Posts