Fixing header logo on my website

[vreatedbyaba81]

"How do I fix the header logo of my website, Watch SmackDown Online? The logo appears too big on mobile devices and doesn't align with the menu, making it awkward for visitors. If anyone knows how to fix this issue, please let me know. I would be grateful for your help. Thanks!"

[johnwebdes40a5 · Accepted solution]

Hello @vreatedbyaba81 

Please follow the steps below to fix the issue where the logo appears too big on mobile devices and doesn't align with the menu in Magento 2:

• First, locate the CSS file of your Magento 2 theme. This can typically be found in the app/design/frontend/[Vendor]/[Theme]/web/css directory.
• Open the CSS file and search for the CSS selector that controls the logo size and position. This is typically located in a media query that targets mobile devices.
• Adjust the CSS code to resize the logo and adjust its position so that it aligns with the menu on mobile devices. For example, you can use the max-width property to limit the size of the logo and the margin property to adjust its position.
• Save the changes to the CSS file and refresh your website to see the updated logo on mobile devices.

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

[josbrod96gbc01]

Sure thing! If you're hitting a wall, it might be time to call in a pro. There are plenty of freelance web designers who could sort this out for you in a snap. But if you're committed to the DIY route, look for online forums or support groups for your specific website platform. And hey, while we're talking fixes, ever thought about sprucing up your brand image? Take a peek at branding for pizzerias, which might spark some ideas for your own site. Sometimes a fresh coat of branding is just the ticket

[victoriaem6471]

The easiest way to have a different logo when your header is sticky , is by using some slope CSS.