Splitted Menu and Logo centered - Support | Kriesi.at

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

Author

Posts
November 23, 2022 at 1:59 pm #1373643

Createve_Solutions
Participant

Hi,
thanks for the great support all the time. Today I have a new question and hope, you can help me.
I want the main menu splitted and the logo centered.
I found a css code and gave it into the quick css, but now it’s not in a good position. The Logo is too small and cutted and the social icons are overlapped with some menu titles.
Could you please help me? I don’t know, what I have to fill in into the css (width, height, etc.)
I will give you the access details in the private part.
Thanks and best regards,
Eve

November 24, 2022 at 7:13 am #1373699

Ismael
Moderator

Hey Createve_Solutions,

Thank you for the inquiry.

There seems to be an issue with the site’s SSL certificate. Please ask your hosting provider to correct the certificate or SSL issue so that we can access the site properly. Did you do the following modification?

// https://kriesi.at/documentation/enfold/menu/#logo-centered-split-menu

Best regards,
Ismael

November 25, 2022 at 12:13 pm #1373859

Createve_Solutions
Participant

Hi,
the SSL certificate will sill come, because it’s a relaunch and the website is already there.
Yes, I think I did this, but it doesn’t work like I want.
Can you help me although the SSL certificate isn’t there?
Best Regards,
Eve

November 25, 2022 at 7:00 pm #1373910

Guenni007
Participant

maybe this could be an alternative solution: it calculates the amount of top-level menu-items and places a copy of your logo to the navigation.
best presetting will be logo left – menu right – because on hamburger active it will have the logo then the right way.

see: https://pureinstall.webers-testseite.de/logo-centered/

PS: you have to synchronize the css media query with your setting – when burger will be active

btw: – you do not need the script – you can place an image yourself manually to main menu ( even svg code is accepted on label ) – give a custom-ID to that menu-item ( e.g.: menu-item-logo ) and play with show or hide real logo or navigation logo image. Like the css on the example page does.

November 27, 2022 at 11:43 pm #1374073
Mike
Moderator
Hi,
Thank you for your patience, I tested the Logo Centered split menu in the documentation and for my demo which has 7 menu items and the search icon and the social icons I found this css worked well:
```
@media only screen and (min-width: 780px) {
#top #header .av-main-nav li:nth-child(4) {
  /* Adjust the width of the logo */
    margin-right:214px;
}

#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(-40%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 165px;  
}
#top nav .social_bookmarks {
    float: right;
}
}
```
with this result:

Perhaps this will help you adjust your css.
Guenni007 thanks for sharing your tips.

Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.