split menu logo issue

Question

The logo in the split menu does not remain centered in the menu when the menu becomes sticky. The site is currently not online, but you can see the issue with your own files as it also happens with them.
I attach two images: normal.png shows the non-sticky state of the menu with the logo centered, sticky.png shows the menu in the sticky state with the image off-set to the left. When transitioning from non-sticky to sticky you can observe (even with your files) the image resize towards the top-left corner of the div.

SemiColonWeb · Accepted Answer

Hello,

Apologies for the Inconveniences caused!

We have just checked this out on Our Live Previews: https://themes.semicolonweb.com/html/canvas/split-menu.html and the Logo appears to be centered for us. We have also attached a Screenshot to this reply to verify this.

Please make sure that you are using the Latest Version of Canvas as this issue might be related to an Older Version. Additionally, it would be great if you could provide us with Live URL so that we can determine the cause of this issue and fix it for you quickly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

fotobob · Answer

OK I uploaded it here's the link: http://fotografics.eu/canvas/ You will also notice that when the menu starts to go sticky, the logo jumps to the top op the div.

Semicolon Web · Answer

Hello, We have checked this out and the it appears to be working fine for us. We have attached a Screencast for you to check. Could please let us know which OS and Browser you are using to check this so that we can run further tests? Additionally, we have noticed that there are several HTML Validat…

fotobob · Answer

Fixed the validation error (the only one left is your Google font link, which is from your template I have not changed it). I'm using macOS Monterey and Safari 15.3.

Semicolon Web · Answer

Hello,

Thanks so much for more information regarding this. We have checked this out and can confirm this. Appears to be an issue with Safari while handing CSS Flex. To fix this, consider using the following code:
[ch_pre type="css"]#logo img {
margin-left: auto;
margin-right: auto;
}[/ch_pre]

We will release a fix for this in the next update.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

fotobob · Answer

Perfect thank you.