1

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

Improve this question
0

3 Answers 3

Reset to default
2

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.
Improve this answer
1
  • 1
    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, 2014 at 22:00
1

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.

Improve this answer
4
  • can u share the code ?
    – Harsha M V
    Feb 6, 2014 at 1:54
  • 1
    You can view the demo here lab.lokeshm.in/demo001 Just resize the window width...
    – Lokesh M
    Feb 6, 2014 at 6:51
  • Did it work for you?
    – Lokesh M
    Feb 6, 2014 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, 2014 at 10:31
1

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...

Improve this answer
4
  • if you see how this works pittsburghkids.org may this is what i need. any idea how i can do that?
    – Harsha M V
    Feb 6, 2014 at 6:40
  • 2
    @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, 2014 at 7:03
  • @HarshaMV That is what I had exactly said in point#1, just add a Glyphicon thrice before text. That's it.
    – lupchiazoem
    Feb 6, 2014 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, 2014 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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