[Resolved] Website header looks strang on google mobile test

[Kevin Wabiszewski]

Hello, when I run my website through google’s mobile friendly test the header looks weird, some times the logo even shows up twice sometimes I run the test.

Here is the css I am using for mobile header

.main-navigation {
border-bottom: 2px #ba1f1f solid;
}

.post-template-default .widget_search {
margin-top: 57px;
}

@media (max-width: 768px) {
#mobile-header {
background-color: #ffffff;
}
.main-navigation .main-nav ul li a {
background-color: #ad0500;
}
button.menu-toggle {
color: #ad0500;
}
}

Any tips for me? If not no worries, but I figured it was worth asking

[David]

Hi there,

i wouldn’t be too concerned here – its where google fails to load some CSS and JS files when performing the test. Sometimes it will get them, sometimes it won’t.

To improve its chances and overall performance check out our optimization tips:

https://generatepress.com/fastest-wordpress-theme/

[Kevin Wabiszewski]

Wow autooptimized increased the speed of my site so much and the site looks perfect on mobile test tool! Thank you David!

[David]

Awesome – glad to be of help.

[Author]

Posts