Hello,
I have discovered an unwanted behavior of the display of the primary menu and logo on the index page of my site. If I view the page on a wide screen (notebook i.e. 16:9) the logo and primary menu are respectively on the left and right of the screen and on top of the slider below. However, if you view the page on a smaller screen (for instance a desk top), the logo will no longer be displayed on top of the slider, but above it on a white background. If you reduce the size of the screen further, the menu will be minimized and the logo is then properly displayed in the middle/top of the slider. I suspect that this behavior is caused by the width/size of the logo and that of the primary menu together. If both combined surpass the width of the screen, apparently the logo is displayed above the menu.
You can see that within the primary menu itself the items will be wrapped if the screen get smaller, until finely it is minimized
If have tried to give the primary menu a specific style width of a percentage of the screen width but that only moves the primary menu to the middle of the screen, and the logo appears still in the white bar above it.
Can you give me a suggestion how I can avoid this unwanted behavior of the combined logo and primary menu, other then less menu items or drastically reduce the font size of the menu?
see: http://www.duepadroni.it/
How to get primary menu and logo to remain at same height level.
1 reply · opened Feb 2, 2019
Hello,
Thanks for your Patience!
We have found several errors on your Page:
The Retina Logo is missing which does not display it on Retina Devices such as Macbook, iPhone and iPads.
The Width of your Primary Men is too large which is why you see this issue. Currently, the way the Header is structured, there is no other choice than decreasing the size of the Text in Menu or having less items. You should consider using smaller sizes of Text/Padding in the Primary Menus on different device widths to tackle this problem. Example code:
.device-lg #primary-menu ul li > a {
padding-left: 12px;
padding-right: 12px;
}We are working on fixing these kind of issues on the Headers. However, we are still working on developing the final update so we currently do not have a timeframe as to when this will be released. We will send you an Email Notification once this is available. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
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