All modern ecommerce templates have been optimized with responsive design. In most of the modern ecommerce templates, when the design scales for mobile view, it shows different header colors and styling.
For example, if in a desktop view, the header color is white and you have put logo on it, but in the mobile view the same theme may show header with black color. The same logo used on the desktop version will not pop up here.
If you are facing this issue, and want to display different logos for desktop and mobile views, we are going to help you today
Below is the smart CSS trick that will show different logos on the screen resolutions less than 480 px.
Use it and enjoy the results
@media screen and (max-width: 480px) {
/**For Mian logo Image Hide**/
.top-bar-center .site-branding .site-branding-logo {
display: none;
}
.top-bar-center .site-branding-link::before {
background-image: url("https://cdn2.bigcommerce.com/n-pktq5q/hkb12/images/stencil/250x100/newjcjlogo.png");/**Add complete uploaded img path**/
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 86px;/**change height according to img height for adjustment**/
vertical-align: bottom;
width: 125px;
}
}
Note: Please, replace this: “
https://cdn2.bigcommerce.com/n-pktq5q/hkb12/images/stencil/250×100/newjcjlogo.png
” with the actual path of the logo you want to use for the mobile screens.
Do you want to ask us something?
If you dream of any style or customization, most probably, there is a possibility of having it on BigCommerce Stencil. You can change from your current look to the desired look with smart playing with code.
For any problem, question or issue on BigCommerce, you can post a question using the comments section below. We will write a short post to help you get what you want.
