mohsin_sharif57 mohsin_sharif57 - 1 year ago 158
CSS Question

Bootstrap with navbar logo

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>
<a href="index.php" class="navbar-left"><img src="logo.jpg" alt=""></a>
<!-- /.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>
<ul class="dropdown-menu dropdown-user">
<li><a href="add_user.php"><i class="fa fa-user fa-fw"></i> Add User</a>

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

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

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

<!-- /.sidebar-collapse -->
<!-- /.navbar-static-side -->

please help me how to fit this image? thanks

Answer Source


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download