Logo Centered Alignment Problem - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
April 6, 2023 at 7:23 pm #1403745
sitesme
Participant
Hello,

I have used the following code to split the menu in two and add center the logo between the menu. However, for some reason, the logo is now very high, hidden by the top bar. Please check the code below and the page where you can replicate the problem.

I highly appreciate it if you can help me out with this issue.
```
.logo img {padding: 6px 0;}

 /*------------------------*/
/* CSS - Logo center split menu
/*------------------------*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
  /* Adjust the width of the logo */
    margin-right:250px;
}

#header .main_menu {
    /*background: gold;*/
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 200px;  
}
}
```
April 7, 2023 at 10:49 am #1403801

Rikard
Keymaster

Hey sitesme,

It looks fine on my end using Firefox, in which browser are you seeing this problem?

Best regards,
Rikard

April 7, 2023 at 10:54 am #1403804

sitesme
Participant

Hi, agreed! The problem seems to be on Safari only.

April 8, 2023 at 10:20 pm #1403917
Mike
Moderator
Hi,
Thanks for your patience and the link to your site, on Safari this is the css causing the issue from your css above:
```
#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 200px;  
}
```
this corrects:
```
#header .logo img {    
    top: 0;
    transform: translateY(0%);
    max-width: 200px;  
}
```
this also works on Chrome in Windows, so I guess Safari is sticker.

Best regards,
Mike
April 17, 2023 at 4:32 pm #1404707

sitesme
Participant

Hi Mike,

Unfortunately, the code change didn’t make any difference.

Just to make sure, I replaced the original code with the one you provided on your post. Is this right?

Let me know if I missed something or how to fix the problem. The only problem is in Safari.

April 18, 2023 at 5:45 am #1404771

Ismael
Moderator

Hi,

Yes, you should replace it with the code that @Mike provided above. Did you try to temporarily disable the Enfold > Performance > File Compression settings? Also, make sure to purge the cache before testing the page again.

Best regards,
Ismael

April 19, 2023 at 11:18 am #1404927

sitesme
Participant

Hello,

The File compression settings were already disabled.
I am using Object Cache and WP Rocket and flushed both multiple times, but the problem persists on Safari.

April 20, 2023 at 12:34 am #1405002

Mike
Moderator

Hi,
Please include an admin login in the Private Content area so we can check.

Best regards,
Mike

April 20, 2023 at 11:57 am #1405037

sitesme
Participant

Hi. Please check the admin access in PVT.

April 21, 2023 at 12:20 am #1405102

Mike
Moderator

Hi,
Thanks for the login, I checked on my Mac v12.6.5 with Safari v16.4.1 and the logo is centered vertically and horizontally, please see the screenshot in the Private Content area.
What versions are you using?
Please note that Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

April 21, 2023 at 12:35 pm #1405163

sitesme
Participant

I did all that and still didn’t see any changes. Clearing the history or all cache on Safari, didn’t work either. I did that in 2 different machines using the latest MacOS and Safari versions. Nothing worked.

However, I played a bit with WP Rocket and clearing the “unused CSS files” solved this problem.

It is solved now. Thank you @rikard, and @ismael for your help.

April 21, 2023 at 5:10 pm #1405183

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Logo Centered Alignment Problem’ is closed to new replies.