Mobile display tweaks

These are some tricks that will adjust the mobile display for your site. Please paste the code you need inside the dedicated area for  Custom CSS Code under the Theme Options Panel:

1. To move the responsive menu upper when the screen width is lower than 740px:

@media all and (min-width:740px){
    #main-menu .responsive-menu {
        margin-top: -18px;

2. To hide the right side of the top header when the screen width is lower than 560px: 

@media all and (max-width:560px){
    #mini .right {
        display: none;

3. To change the logo’s size when the screen width is lower than 740px:

@media all and (max-width: 640px) {    
   #logo {      
	width: 80px !important;      
	height: auto !important;      
	margin-top: 10px !important;      
	margin-bottom: none !important;  

Please edit the values after your own needs.

Leave a Reply

Your email address will not be published. Required fields are marked *