Naomi Naomi - 1 month ago 6
CSS Question

Image moves over the navbar on smaller screen

I have created a side navbar and have an image next to it. This is made in bootstrap since we are making the site responsive but the navbar and image have set width. When it's on a screen that is 22 inch the image is placed correctly but when I move it to a smaller screen the image cover some of the navbar. Could this be because the columns affect the width?

Since I have no idea where the issue is I have put it on a codepen.
http://codepen.io/naomilea/pen/vXwdEO

This is the relevant code for the issue

<div class="container-fluid" id="frontpage">
<div class="row">
<div class="col-md-1">
<nav class="navbar navbar-default navbar-fixed-side">
<div>
<span class="glyphicon glyphicon-star-empty navbarTitle"></span>
<h1 class="navbarTitle">BRHUB</h1>
<div class="navbarSplit"></div>
</div>
<div class="header">
<span class="glyphicon glyphicon-list-alt navglyph"></span>
<h2>MAIN NEWS</h2>
<div class="navbarSplit"></div>
</div>
<div class="header">
<span class="glyphicon glyphicon-phone navglyph"></span>
<h2>NOW TRENDING</h2>
<div class="navbarSplit"></div>
</div>
<div class="header">
<span class="glyphicon glyphicon-list navglyph"></span>
<h2>CATEGORIES</h2>
<div class="navbarSplit"></div>
</div>
<div class="header">
<span class="glyphicon glyphicon-pencil navglyph"></span>
<h2>REGISTER/SIGN IN</h2>
<div class="navbarSplit"></div>
</div>
<div class="header">
<span class="glyphicon glyphicon-cog navglyph"></span>
<h2>SETTINGS</h2>
<div class="navbarSplit"></div>
</div>
<div class="socialMedia">
<img class="image" src="http://static.wixstatic.com/media/afd97e_1c5f5ad2a5994bf689307d48d931b320~mv2.png">
<img class="image" src="https://cdn.ecommnet.uk/wp-content/themes/ecommnet/library/images/twitter-icon.png">
<img class="image" src="http://vectorlogofree.com/wp-content/uploads/2014/01/25280-tumblr-letter-logo-icon-vector-icon-vector-eps.png">
</div>
</nav>
</div>
<div class="col-md-11">
<input type="search" class="searchBox">
<img src="http://www.planwallpaper.com/static/images/518169-backgrounds.jpg" class="feauturedImg ">
</div>
</div>
</div>


CSS

.navbar-fixed-side {
width: 160px;
height: 100%;
background-color: #f8f9f9;
font-family: Bebas Neue;
text-align: center;
font-size: 20px;
position: fixed;
margin-right: 0px;
margin-left: 0px;
visibility: visable;
overflow-y: scroll;
}

.feauturedImg {
max-width: 1760px;
width: 100%;
max-height: 700px;
margin: 0px 0px 0px 0px;

}

.col-md-1 {
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
}

.col-md-11 {
padding-left: 0px;
padding-right: 0px;
}

Answer

I seen your CSS style to fixed the nav bar:

.navbar-fixed-side {
    width: 160px;
    ...
}

Just add style="margin-left:160px" to the container of your image

like this: <div class="col-md-11" style="margin-left:160px"> to fix your image margin.

Comments