Logo problem in responsive design - at certain sizes it will not be displayed

[simonemenne]

I urgently need help with displaying the logo in responsive design. In some display widths, it is not displayed at all.

Screen, on the left side:
Above a width of 1456px, it appears on the left.

Screen in the middle:
Logo is not displayed below 1455px

Screen, on the right side:
Below 995px, it appears in the header.

Below is a screenshot showing how the logo behaves in the three different display widths:

However, below this screen width, it disappears completely – that is, between 1455px and 996px.

So…
The logo should be displayed at any width, any time - whether at the top or on the left. How can I fix this problem?

[ruenel]

Hello Simone,

Thanks for writing in! It seems that you were using the Law demo as your base design. To display the logo all the time, you can insert this custom CSS in Theme Options > Custom Code > Global CSS;

@media (min-width: 979px) {
    .x-brand {
        display: block;
        margin-right: 0.5em;
    }
}

@media (min-width: 1441px) {
     .x-brand {
         display: none;
     }
}

Best Regards.