Move mobile menu button to the right and logo to the left in Qode Bridge Theme

I’ve always thought it was strange the Qode Bridge defaults their mobile menu to the left side of the screen, seeing as the regular menu normally appears on the right side of the screen.

The good news is, it’s not hard to switch it, it can be done with pure CSS. In the backend of your wordpress site, click on Appearance -> Theme Editor and paste the following code into style.css:

                    

.mobile_menu_button { float: right; margin-right: 0;}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
	.header_top .container_inner { width: 100%;}
}

@media only screen and (max-width: 1000px) {
	.logo_wrapper { position: relative; left: 0;}
	.q_logo a { left: 0;}
}
@media only screen and (max-width: 600px) {
	.q_logo img { max-width: 65vw;}
	.header_bottom {padding: 0 20px;}
	.header_bottom .container_inner { width: 100%;}
}

Some of the code here pertaining to the header is just opening up the available area to help the menu button sit closer to the right side of the screen.

It will also left align your logo instead of centering it. If you want to keep the logo centered, you only need this code:

                    

.mobile_menu_button { float: right; margin-right: 0;}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
	.header_top .container_inner { width: 100%;}
}

@media only screen and (max-width: 600px) {
	.q_logo img { max-width: 65vw;}
	.header_bottom {padding: 0 20px;}
	.header_bottom .container_inner { width: 100%;}
}

Related Posts

Leave a Reply

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