Logo center, menu left and right

Hey FerryTCB,

To create a split menu with centered logo please start by selecting the “Menu and Logo position” to “Logo Center Menu Below” from Enfold > Header > Menu and Logo Position

Then try adding the below code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

Adjust the nth-child(x), margin and top values to suit your design.

1. nth-child(2) in the below code refers to the 2nd menu item if you have 6 menu items change it to 3.
2. To vertically align the logo and menu adjust the margin-top and the top values in the below code.

That’s all friends :)

/* Split menu
----------------*/

@media only screen and (min-width:768px) {

.av-main-nav li:nth-child(3) {
    margin-right:300px;
}
.av-logo-container {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}
#header {
    margin-top: 30px;
}}

Best regards,
Vinay

• This reply was modified 7 years, 4 months ago by Vinay.

Hi CPM_usa,

Please remove this code
https://cl.ly/3r1B0H0y0L03
and add this code, you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

.container.av-logo-container {
  top: 0;
}

If you need further assistance please let us know.
Best regards,
Victoria

Hi,

I’m glad you were able to get this solved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon