Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

AdminLTE: side menu button not staying fixed

mrme01

New Coder
I am trying to edit the following CSS,
CSS:
@media (min-width:768px) {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
        transition: margin-left .3s ease-in-out;
        margin-left: 250px;
    }
}

I would like the contents of the page to move with the side menu, but not the menu button itself.

I have tried to remove the .main-header from the CSS, but that leads to a white box to the left of the menu the same size as the menu at 250px, but it does make the button stay still...

I am pulling my hair out, trying to decipher this piece of CSS, but it's just not computing for me, what I should be editing.

I have created a video to show what is going on,
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
View: https://www.youtube.com/watch?v=KsARWWu8tIo


Thanks for taking the time to read my post :)

The HTML,

HTML:
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>

<body class="   layout-navbar-fixed">
    <div class="wrapper">

        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>

            </ul>

        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">

        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">

                <!-- /.content-header -->

                <!-- Main content -->
                <div class="content">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>

                                        <p class="card-text">
                                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                        </p>

                                        <a href="#" class="card-link">Card link</a>
                                        <a href="#" class="card-link">Another link</a>
                                    </div>
                                </div>

                            </div>

                            <!-- /.col-md-6 -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.container-fluid -->
                </div>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->

        </div>
    </div>
    <!-- ./wrapper -->

    <!-- REQUIRED SCRIPTS -->

    <!-- jQuery -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="../../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="../../dist/js/demo.js"></script>
</body>

</html>
 
Hi there,

Can you show the CSS for the menu button?
You will probably have to use absolute positioning for the button.
Hey, thanks for taking the time to reply,

I am having difficulty finding the correct CSS, as I'm not entirely sure what I am looking for. developer tools don't make much sense, and the CSS file is 49K+ lines, so finding anything relevant is a challenge.
 
If you look in the top-left corner of the developer tools, you should see an arrow in a box. If you click this, you can select the menu button from the page, and then in the styles tab, there will be a link with the CSS file and line number. Clicking on this link will take you to the sources tab and highlight the selected CSS.
 

Attachments

  • 1712089993570.png
    1712089993570.png
    70.3 KB · Views: 2
Looks to me your menu button is in the same parent container as your content. Put it in a separate container if you can, or try position:fixed (and other necessary styles for spacing etc) and that will force it to be "stuck" to the browser window (viewport). Maybe something like:

position: fixed;
left: 20px;
top: 20px;
 

New Threads

Buy us a coffee!

Back
Top Bottom