Tricky collapsible bootstrap navbar problem

[lancsDavid]

i’m trying make a collapsible navbar such that - on very small screens (up to ~ 520px) - 2 toggle buttons appear. one shows/hides an unordered list when clicked, the other shows/hides either a search form or a 2nd unordered list (haven’t decided which yet)

point being, when the screen/browser-width is big enough both the unordered list AND the search-form / 2nd unordered list must appear side by side in a one line navigation menu (the unordered list to the right of a logo, the search form/2nd unordered list - probably - over on the right hand side of the page)

this jsfiddle shows my problem. basically, expand the width of the output until its no longer collapsed & you’ll see that the unordered list (Link-Link-Dropdown) & the search form (search-submit) are no longer on the same line. ie: the search-submit form drops down onto the line below. & i want them on the same line

anyway, any help appreciated

[pr0c3ss]

could add the below css… probably not the best solution, but it does the job… then apply margins for refined positioning

#bs-example-navbar-collapse-2{
position:absolute;
top:0;
right:0;
}

[ronpat]

You’re right, position:absolute is a poor choice.

[pr0c3ss]

constructive criticism! Absolute is a quick dirty fix… below would be a better solution

#bs-example-navbar-collapse-2{
float:right;   
}
#bs-example-navbar-collapse-1{
float:left;
}

[ronpat]

Much better

I would suggest that you only need to float
#bs-example-navbar-collapse-1

Doing so allows the search field and button to left align when selected with the buttons at narrow widths.

See what you think.

[ronpat]

IancsDavid,

A side note. You might try applying temporary outlines (or possibly background colors) to elements when you are having a problem positioning them on a page. The outline may help you see where the box is placed. It’s not a perfect tool, but I find it to be helpful because it does not affect the layout the way borders can.

[lancsDavid]

eh flipping eck, success at last!!! pr0c3ss’s answer works. ronpat’s works even better

( still a few things to do to get it 100% but nonetheless. this is big progress )

thanks dudes. u’re princes