Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 19, 2022 at 8:23 pm #1365595
    garyt13

    I added the code from the below documentation to make my logo center and the menu on the left and right.

    Menu

    The right side of my menu is overlapping my logo. How would I resolve?

    September 20, 2022 at 7:41 am #1365627
    Nikko

    Hi garyt13,

    There are two options to resolve this, either move the main menu or the logo.

    1. Move the Main Menu: (logo still centered)
    Find this CSS code in Enfold > Theme Options > Quick CSS:

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

    replace it with:

    #header .main_menu {
    width: 100%;
    left: 50%;
    transform: translateX(-47.4%);
}

    2. Move the Logo: (main menu is still centered)
    Replace:

    #top #header .av-main-nav li:nth-child(3) {
    margin-right: 150px;
}

    with:

    #top #header .av-main-nav li:nth-child(3) {
    margin-right: 250px;
}

    Also, replace:

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

    with:

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

    Hope this helps.

    Best regards,
    Nikko

    September 20, 2022 at 10:54 am #1365661
    Guenni007

    or give this a try – it starts with setting the header options on : logo left, menu right.
    the script will take the logo html code and insert it to the center of the main-menu items as a menu-item ( ID is menu-item-logo).
    If the burger is shown the css code will set that ID to display: none.

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

    September 20, 2022 at 8:00 pm #1365764
    garyt13

    Thanks Nikko, I tried the suggested. Gallery is still pretty far from the logo. How would I fix?

     /*------------------------*/
/* 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) {
    margin-right: 250px;
}

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

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

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

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 150px;  
}
}
    September 23, 2022 at 12:44 am #1366055
    Nikko

    Hi garyt13,

    Please replace these codes:

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

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 150px;  
}

    with:

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.