User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a Navigation Bar which has numerous content and we are using Bootstrap 3 to build a collapsible menu but that only works in the smallest screen.

Any pointers on how can this be solved.

When the app is using the 1024 and 640 pixel width the search bar and the profle link drops to the next row and looks ugly.

How can we solve this via design to make it look good on a responsive layout when we have more content than it can accommodate.

enter image description here

share|improve this question
up vote 2 down vote accepted

There are a few pointers here. These are my suggestions.

  1. Remove the text Profile.
  2. Most of the sites have a caret next to the profile image, so have one and show the dropdown.
  3. Using @media queries, try removing a few links or make all the links in another small Menu menu.
share|improve this answer
Along the same lines, have the search icon stand alone and only show the textbox when the user taps/clicks on it. that will save you a lot of room right there. – Charles Wesley Feb 5 '14 at 22:00

I too had same issue and to solve this I used @media queries to set the font size as well as input field size proportionately.

share|improve this answer
can u share the code ? – Harsha M V Feb 6 '14 at 1:54
You can view the demo here Just resize the window width... – Lokesh M Feb 6 '14 at 6:51
Did it work for you? – Lokesh M Feb 6 '14 at 9:05
thanks got it. i guess i can use that to reduce the spacing as well. i will test it out. – Harsha M V Feb 6 '14 at 10:31

By default, collapsible menu is activated/displayed only on .col-xs- screens. To solve your problem, explore options as under:

  1. When moving from highest to next low level screens, try to show links under single menu option. Example: in .col-lg- screen, all links will appear as show in OP screen shot. In lesser screens (.col-md- and .col-sm-; in .col-xs- everything will collapse by default), you may have only one menu item, say 'Options' or 'Explore'(any other creative word) under which show the links - PHOTOS, PROFESSIONALS, PROJECTS and ARTICLES.
  2. Use offset to adjust items on nav-bar. Example: In .col-md-, 'MY FAVORITES' and 'PROFILE' options could be right-align adjusted to search option. But, nav-bar will be width will be increased. See live @ JoinNTravel. In home page, click 'Show Options' button and observe how fields for 'Date & time' are adjusted. Same way, using offset the 'MY FAVORITES' and 'PROFILE' options could be right-align adjusted.
  3. Show PHOTOS, PROFESSIONALS, PROJECTS and ARTICLES links in next row of nav-bar as left, center or right aligned.

Experiment and see what suits best...

share|improve this answer
if you see how this works may this is what i need. any idea how i can do that? – Harsha M V Feb 6 '14 at 6:40
@HarshaMV this is a UX site, if you need implementation / code then you've asked this question on the wrong site. UX is about what should happen, not how to implement it. – JonW Feb 6 '14 at 7:03
@HarshaMV That is what I had exactly said in point#1, just add a Glyphicon thrice before text. That's it. – San Feb 6 '14 at 9:33
@JonW i need an UX solution. also since since it has to be eventually implemented am just curious on how it can be implemented too. whats the problem of just solving the UX issue and not able to implement it. Tried searching on SO but not much help so am assuming the once who are replying here have seen the problem thru and had it implemented so would be able to throw back some pointers. is that okay? – Harsha M V Feb 6 '14 at 18:44

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.