3 replies · opened Dec 18, 2018
Hello,
I change the logo of the theme to 314x100px however on some screen size (between 1000 - 1165px) the menu is shown on the different row with header.
Do you have any recommendation how to fix this?
Is there any recommend logo width?
Hello,
Since you are using the Full Header, the size of the Header is flexible and depends on the Browser Size, so a recommended Logo Size is not really practical here since the Header will also have a Menu. If your Menu has fewer items, the header will look just fine even with the Larger Logo. It is recommended to use Media Query to decrease the Logo Size by CSS or decrease the Font Size and Padding for the Menu Items Text. Example:
.device-lg #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}
.device-lg #primary-menu ul li > a {
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
letter-spacing: 0px;
}This should definitely work fine. You can change the Values above according to what suits you best. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
The code work but with sticky header. The menu was not align in header when scroll down. Do you have any recommendation.
Hello,
Please use the following code replacing the above code:
.device-lg #header:not(.sticky-header) #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}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.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard