CODEWITHSUNDEEP
jqueryhtmlcss
Jean-Mathieu
Jean-Mathieu

Reputation: 193

Side bar width doesn't respond 100% width Clickable

I'm having an issue with my code. I'm trying to make my width work like it should but the width doesn't want to stay at 15%. I get it from 100% to 15% when you scroll down.

This is my side bar code:

<div id="sidebar-wrapper" style="width: 15%">
    <div class="metro" >
        <nav class="sidebar (light)">
            <ul>
                <li><a class="dropdown-toggle" href="#">Welcome Your Username!</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="">Profile Settings</a></li>
                        <li><a href="">Change Password</a></li>
                        <li><a href="">Tracking Log</a></li>
                    </ul>
                </li>

                <li><a href="/sheridan">Home</a></li>
                <li><a href="/sheridan/news">News</a></li>

                <li><a href="/sheridan/memberlist">Members List</a></li>

                <li>
                    <a class="dropdown-toggle" href="#">Application Development</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/app/assembler">Assembly</a></li>
                        <li><a href="/sheridan/app/c">C,C#,C++</a></li>
                        <li><a href="/sheridan/app/java">Java</a></li>
                        <li class="divider"></li>
                        <li><a href="/sheridan/app/linux">Linux</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Web Development</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/web/html">HTML/CSS</a></li>
                        <li><a href="/sheridan/web/js">Javascript</a></li>
                        <li><a href="/sheridan/web/php">PHP/MySQL</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Math</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/math/calculus">Calculus</a></li>
                        <li><a href="/sheridan/math/discrete">Discrete Math</a></li>
                        <li><a href="/sheridan/math/statistic">Statistic</a></li>
                        <li class="divider"></li>
                        <li><a href="">R</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Article</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/submit">Create An Article</a></li>
                        <li><a href="/sheridan/getCode">Article Approval</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Picture</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/picture">View Picture</a></li>
                        <li><a href="">Upload A Picture</a></li>
                        <li><a href="/sheridan/picture/approval">Picture Approval</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

When I tested it everything was working fine. But now nothing want to work. I have been trying to figure it out for 1h and nothing is working...

Does anyone know what could be the problem?

You can view it at https://www.jmdev.ca/sheridan/ and the working version at https://www.jmdev.ca/sheridan/test/

Upvotes: 0

Views: 59

Answers (2)

Architect - Hitesh
Architect - Hitesh

Reputation: 1239

.metro .sidebar 
    {
       margin: 0;
       padding: 0;
       background-color: #3D3D3D;
       width: 275px;
       height: 100%;
       overflow: hidden;
    }
  • List item

Just Replace This css In Metro-bootstrap.css File

Upvotes: 1

jmore009
jmore009

Reputation: 12923

You're targeting the wrong element. This is what you actually want:

<nav class="sidebar (light)">

It's set to position: fixed which is why it is ignoring it's parent width of 15%. The properties on .sidebar are as followed:

.metro .sidebar {
   margin: 0;
   padding: 0;
   background-color: #3D3D3D;
   width: 100%; <------------- this
   height: 100%; 
}

Adjust the width and that should correct it

Upvotes: 2

Related Questions