CSS Force content below fixed DIV in responsive design using bootstrap?

Question

I have two DIV's that are fixed on the top of the page when the users begins to scroll, those DIV's stay at the top.

I have a navbar div, and I have a search bar div right under this. The navbar works as intended when on mobile, because it is the same height on mobile, and desktop 70px. However, the search bar is a form, and on desktop the height is 100px, but on mobile it elongates and is closer to 200px.

So, the content that is underneath the search bar gets cut off when on mobile. What is the right way to handle this? I would prefer something with pure CSS if possible, but I can use some Javascript, but it's an AngularJS project so I need to be careful as somethings are just a bit touch with JS.

I appreciate any help.

Edited to include code..

Here is the search bar;

<div class="container">
    <div class="col-md-12 fixed-top" style="background-color: white">
        <div class="header-form" style="border: 2px solid purple; margin: 1%;">
            <div class="row">
                <form ng-controller="GetQuery" ng-submit="submitForm()">
                    <div class="col-md-6">
                        <div class="form-group label-floating">
                            <label class="control-label">Starbucks, McDonalds, etc..</label>
                            <input ng-model="form.keyword" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group label-floating">
                            <label class="control-label">City, State or Zip..</label>
                            <input ng-model="form.location" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" ng-click="Submit" href="#!view1" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Lets Go!</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

This bar spans the entire screen on desktop, on small screens it collapses and stacks the inputs.

So, if I have another container under this..

<div class="container">
     Some content..
</div>

On desktop this content container will be fine because the search bar is only 'x' pixels high. However on mobile, the content container will be partially covered because now the search bar is 'xx' pixels in height.

Answer 1

You could use media queries in your CSS and target whenever it is mobile, give the below container more margin top and when it is desktop give it less margin-top. The issue you are having is related to the fixed position and that causes the fixed element to get out of the normal flow.