Question

I have two pretty much Identical templates except for a few color changes, image changes. I have buttons for the mobile navigation when the screen is below 767px in width. They only appear below this size.

One of my buttons has a transparent background the other does not. I looked and both images have background transparencies. I need the button with the white background to have a transparent background. It looks like it might be the element that contains the button that has the background. The css for these two templates is almost identical. I am not sure why there is an issue with one but not the other. I have posted links to screenshots to illustrate my issue.

screenshots:

Button with white background (wrong): http://prntscr.com/34ljql

Button with transparent background (correct): http://prntscr.com/34llwk

HTML:

<p class="pull-left visible-xs" id="mobile-nav-button-container">
    <button type="button" class="btn btn-xs" data-toggle="offcanvas" id="thief-river-falls-mobile-btn">
        <img src="/_images/layout/thief-river-falls-mobile-btn.png" />
    </button>
</p>

CSS:

#mobile-nav-button-container{
   margin-top: 10px;
}

#thief-river-falls-mobile-btn{
  background-color: rgba(0,0,0,0);
  border: none;
}

URLS:

Issue: http://sevenclanscasino.designangler.com/thief-river-falls/thief-river-falls-home

Correct: http://sevenclanscasino.designangler.com/warroad/warroad-home

Was it helpful?

Solution

#thief-river-falls-mobile-btn {
   background: transparent;
}

It's working for me.

OTHER TIPS

In the actual site the class is

#thief-river-falls-mobile-btn{
 border: none;
}

You haven't added

background-color: rgba(0,0,0,0);

simply adding this solves the prob for me..

There is a padding for the menu button which is causing the ``background-color to appear on the sides of the button.Try this

#thief-river-falls-mobile-btn {
   padding:0;
   margin-left:5px;
}

or set background-color transparent for this

#thief-river-falls-mobile-btn {
   background-color:rgba(0,0,0,0);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top