Change order of nav items in responsive design

Question

I am using Cascade Framework and have a simple header with a logo, select, and a link to an external site.

The layout if fine as is in desktop mode. In responsive mode, it looks something like:

---------------------------------------------
Company Name
---------------------------------------------
Volvo
---------------------------------------------
Menu Here
---------------------------------------------

Whereas I'd like the following in responsive mode:

---------------------------------------------
Company Name                        Menu Here
---------------------------------------------
Volvo
---------------------------------------------

These answers suggest using flexbox or jquery. I can't use flexbox because I need ie8 support. I'd also rather not have to resort to jquery since this seems like it should be a rather straight forward css solution. Another answer on that page shows a ton of css that I've been trying to adapt to my use case and that didn't fix the issue either.

wow, that Cascade Framework uses the ugliest CSS model I have ever seen :( — Devin, Sep 20 '14 at 23:52
@Devin : What's ugly about Cascade Framework's CSS model in your opinion? — John Slegers, Jan 16 '16 at 01:45

score 2 · Accepted Answer · answered Sep 20 '14 at 23:41

2

How about using absolute positioning?

.menuHere {
    position:absolute;
    text-align:right;
    right:0
}

http://jsfiddle.net/6txfvvo6/3/

answered Sep 20 '14 at 23:41

Sammy

3,059
4
23
32

I didn't even think about that. Not sure what's wrong w/ me. – user_78361084 Sep 21 '14 at 17:08

Change order of nav items in responsive design

1 Answers1