Question 229744 in Html Question posted in
Some basic documentation can be found here.

CSHTML Overlapping Footer with Side Navigation

The sidebar is overlapping with Footer, as shown in the below image
enter image description here

I want the footer to be after the fixed to bottom.
My Layout is as below
Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<body>
    <!-- Begin page -->
    <div id="layout-wrapper ">
        <div class="desktop-menu">

        <!-- Header -->
        @Html.Partial("_Header")
        <!-- End Header -->
        <!-- Left Sidebar -->
        @Html.Partial("_LeftSidebar")
        <!-- End Left Sidebar -->
        </div>
        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">
                <!-- Start content -->
                @RenderBody()
                <!-- End content -->
            <!-- End Page-content -->            
        </div>
        <!-- end main content-->
       
    <!-- Footer -->
    @Html.Partial("_Footer")
    <!-- End Footer -->
</body>
</html>

_leftSidebar.cshtml

 <div class="vertical-menu position-fixed">
        <!-- LOGO -->
        <div data-simplebar class="sidebar-menu-scroll">
            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                    <ul class="metismenu list-unstyled" id="side-menu">
                        <button type="button" id="side-short"
                            class="btn btn-sm px-3 font-size-16 header-item vertical-menu-btn">
                        <i class="fa fa-fw fa-bars"></i>
                    </button>
                    <button type="button"
                            class="btn btn-sm px-3 font-size-16 header-item vertical-menu-btn vertical-menu-btn-one">
                        <i class="fa fa-fw fa-bars"></i>
                    </button>
                    <li class="menu-title">Menu</li>

                    <li>
                        <a href="index.html" class="active">
                            <div class="home-menu">
                                <span class="icon-home icon"></span>
                                <span class="menu-title-one">Home</span>
                            </div>
                        </a>
                    </li>

                    <li class="ins-listing">
                        <a href="javascript: void(0);" class="has-arrow-one ">
                            <div class="home-menu home-menu-one has-arrow">
                                <span class="icon-Instance icon"></span>
                                <span class="menu-title-one">test</span>
                            </div>
                        </a>
                        <ul class="sub-menu" aria-expanded="true">
                            <li>
                                <a href="test.html">test</a>

                            </li>
                            <li>
                                <a href="test.html">test</a>
                            </li>
                        </ul>
                    </li>  </ul>
                }
                       </div>
    </div>

_footer.cshtml

<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6">
                <ul class="footer-ul">
                    <div class="footer-titel">Quick Links</div>
                    <div class="footer-border"></div>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>                    
        </div>
    </div>
</footer>

<div class="container-fluid">
    <div class="row copye">
        <div class="col-sm-6">
            &copy; test
        </div>
        <div class="col-sm-6">
            <div class="text-sm-end d-none d-sm-block">
                <b>Version</b> 1.0
            </div>
        </div>
    </div>
</div>

CSS

.vertical-menu {
     width: 250px;
     background: var(--bs-sidebar-bg);
     bottom: 0;
     margin-top: 0;
     position: fixed;
     top: 0;
     -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     box-shadow: 0 2px 4px rgba(15, 34, 58, .12)
}

.footer {
     bottom: 0;
     padding:50px calc(1.25rem / 2);
     right: 0;
     color: var(--bs-footer-color);
     z-index: 1001;
     position: relative;
     -webkit-box-shadow: 0 0 4px rgba(15, 34, 58, .12);
     box-shadow: 0 0 4px rgba(15, 34, 58, .12)
}

I would like to have the footer not overlap with the side navigation contents, when I scroll down the footer is overlapping with side navigation and menu gets hidden

Tags:

2

Answers


  1. 0

    Set a higher z-index for .footer to ensure it’s above the sidebar.

    .vertical-menu {
    (your current styles)
    z-index: 999;
}

.footer {
   (your current styles)
    z-index: 1000;
}
    Login or Signup to reply.
  2. 0

    Try * to apply elements.

    .vertical-menu, .vertical-menu * {
    (your current styles)
    z-index: 100;
}

.footer, .footer * {
   (your current styles)
    z-index: 200;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search