Icons and buttons in header shifting positions

Support
#1

I have made several headers as well as loaded the ‘default’ template and all are exhibiting strange behavior when shrinking the page. Some of the icons or buttons in the top bar are shifting positions or collapsing when the screen is resized or viewed on mobile devices. I have attached screenshots to illustrate the issue since it is hard to describe.


I’m not sure why this is happening but since it is occurring with a default template, I’m fairly certain it’s not being caused by anything I’m doing wrong?

#2

I tracked down the offending CSS. For some reason the following rule was being applied to the element (in this case, .hm7) that was shifting down:
@media only screen and (max-width: 1000px) {
.hm7 {
height: 1px !important;
}
}

I’m not sure why the above css is there to begin with, but I overruled it with:
height: auto !important;

#3

Hey,

We are glad that your problem was solved.