0

I have some knowledge in css and html but new in responsive design.

I have an header i want to create that header responsive . I need some guidelines for this. I am using bootstrap row and columns but in responsive right side content shifted in new row. I want in same line in min 320px width also.

Mobile header:

enter image description here

Desktop header:enter image description here

I need some guidelines how i can achive this.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
sonalgoyal
  • 359
  • 1
  • 6
  • 19

3 Answers3

1

Since you're using bootstrap, you can use col-sm-* and col-md-* for other responsive features.

For a navbar, they already have built in responsive functionality.

Look at this Bootply which just has the default bootstrap navbar.

Look at the code (take away /render in the URL) and then work from there.

Albzi
  • 15,431
  • 6
  • 46
  • 63
0

you can do this by using media quires

 @media(max-width:767px){}
 @media(min-width:768px){}
 @media(min-width:992px){}
 @media(min-width:1200px){}

reference link Twitter Bootstrap 3: how to use media queries?

Community
  • 1
  • 1
Atif Azad
  • 697
  • 2
  • 9
  • 21
0

you might be using bootstrap 3.

The right side content might getting shifted to new line because of space issues. Bootstrap has the navbar-collapse class for handling this issue.

Read this link: http://getbootstrap.com/components/#navbar

Rohit Rana
  • 43
  • 6