Tricky collapsible bootstrap navbar problem

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

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


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

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

1 Like

Much better

I would suggest that you only need to float

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

See what you think.

1 Like


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.

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.