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%;}
}
This code works with the following header settings:
But in this case I can´t fix the logo on the left side. It is always centered.
I want to have a possibility to fix the logo 20px from the left side and the mobile menu on the right side?
I’ve updated the post to include the header settings I was using when I implemented this code. Maybe you are using different settings, which may require modified code.
Thank you for the great tip. Is there a way to out the search logo at thw left also?
On this website: http://www.climbcotopaxi.com I have the search logo on mobile at the right. With your code will it move it the the left?
The mobile corrector put the url wrong… http://www.climbingcotopaxi.com
To move your search icon to the left, you would need to add this as well:
@media (max-width: 1000px) {
.header_inner_right { float: left;}
}
thank you very much!!!! it worked!!! just a little question about 1000px, if I add it in your previous code inside the 600px is it okay also? don’t have a tablet to see if there is a change in 600px to 1000px display
thank you very much!!!! it worked!!! just a little question about 1000px, if I add it in your previous code inside the 600px is it okay also? don’t have a tablet to see if there is a change in 600px to 1000px display
I haven’t tested but 1000px is a breakpoint in Bridge, so you probably need it at 1000px.
To test at different display sizes open up the site in chrome and press F12 to bring up the developer console. Then, hit ctrl + shift + m to switch the browser into mobile testing mode – you can choose any screen size to test.
Thank you so much!!! This saved me lots of work!