how to solve menu issue on phone

Question

as you can see from screen capture, the menu(burger) on left is very close to logo, what is best way to solve? thanks

SemiColonWeb · Accepted Answer

Hello,

You can simply use the following code for the Mobile Devices to make the Logo smaller and have more space for the Mobile Hamburger Icon:

.device-xs #logo img {
	height: 80px;
	margin-top: 10px;
	margin-bottom: 10px;
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

rfollett · Answer

ok thanks, can I add this code into css/responsive.css ? if so then where?
The reason I want to do this rather than add to css/custom.css is because i have about 20 pages and then I would need to add that line to all the pages..

Semicolon Web · Answer

Hello, It is highly recommended to use css/custom.css File as then you will never lose your Customizations when updating the Template to newer versions. However, it is absolutely your choice to use the css/responsive.css File as it will work fine as well. Simply add the codes at the very end. Hope …