Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear.
Embedded within this button is a bootstrap glyphicon:
<div class="nav" id="sidebar">
<button class="toggle-slide-left btn btn-custom btn-cutsom-cat">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
The glyphicon appears horizontally centered when viewing the page on desktop or when resizing in Firefox. However, on mobile devices or Internet Explorer, as the page and button size decreases, the glyphicon shifts to the right, indicating some sort of padding issue.
I attempted to correct this by adding
pading-left: 0px; padding-right: 0px;Below is the relevant CSS code:
.btn-custom-cat{
height: 30px;
width: 80%;
margin-left: 5%;
text-align: center;
}
#sidebar.affix-top {
position: fixed;
margin-top: 10px;
width: 5%;
}
#sidebar.affix {
position: fixed;
top: 60px;
width: 5%;
}
In full-screen view on Firefox 30:
In reduced width on Firefox 30:
In full-screen view on IE10:
In reduced width on IE10 (issue here):
To observe the website and inspect the button layout for yourself, please visit: [removed after answer was given]