[Solved] Bootstrap navbar in responsive mode pushing content down on Click

Last Reply 6 months ago By dharmendr

Posted 6 months ago

hi

display bootstrap navbar in responsive

when I click on the navbar to collapse it push Items at bottom of the page and when it collapses, Items return to their place

what should I do for solving this problem?

I used below code for navbar:

<div class="row">
    <div class="col-sm-12">
        <div class="col-sm-6">
            <nav class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">لیست املاک</a></li>
                <li><a href="#">سپردن ملک</a></li>
                <li class="active"><a href="#">درخواست ملک</a></li>
                <li><a href="#">مشاوران شما</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">تماس با ما</a></li>
            </ul>
        </div>
    </nav>
        </div>
        <div class="col-sm-6">
            <div class="col-lg-12" id="BDDateM">
                <div id="TH31">
                    <asp:Image ID="Image10" runat="server" ImageUrl="~/Image/main/phone.png" CssClass="BphoneM">
                    </asp:Image>
                    <div id="BTH31R">
                        <span class="blinking">44500991</span>
                        <asp:Label ID="Label3" runat="server" CssClass="dateMN">10 خط</asp:Label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <div id="DDtyp">
            <asp:Label ID="Label30" runat="server" CssClass="lbltypeM">نوع ملک:</asp:Label>
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="DdltypeM" runat="server" CssClass="ddtypeM" OnSelectedIndexChanged="ddltype_OSIC"
                        AutoPostBack="true">
                    </asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

Best regards

Neda

Posted 6 months ago

Hi nedash,

Add this css.

#collapse
{
    position: absolute;
    z-index: 1;
}