-1

it is different question from other questions. because in this question sidebar wrap out to the logo. i want to use logo in my page. but when i use it. it will not fit on the screen. The side bar covers the logo on desktop. the screen shot is attach alsothis is the result on desktop. Just half off logo is shown. but when i open this page in my mobile. it looks good.

   <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
             </button>
            <a  href="index.php"  class="navbar-left"><img src="logo.jpg" alt=""></a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">

            <!-- /.dropdown -->

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="add_user.php"><i class="fa fa-user fa-fw"></i> Add User</a>
                    </li>

                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">

                    <li>
                        <a href="index.php"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                    </li>

                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

please help me how to fit this image? thanks

mohsin_sharif57
  • 39
  • 3
  • 13

1 Answers1

1

Try

in the markup

<img class="img-responsive logo" src="logo.jpg" alt="">

and in the css

.logo {max-width:150px; /* Adjust accordingly */ }

and add padding/margin to the sidebar.

alx.p
  • 73
  • 1
  • 6