Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 21, 2019 at 11:03 pm #1149998
    MLA18

    Hello Support,

    I am currently using the coding below to use the “Logo Centered Split Menu” as provided by Enfold documentation Is it possible to have just the Logo area be transparent, while the rest of the menu/header area has a colored background? Also, is it possible to specify a logo size which in independent of the header size (currently using a custom header size pixel value of 50px…but would like the logo to be bigger/taller than 50px)?

    Any advice you could provide would be greatly appreciated.

    Thanks in advance!

    /*————————*/
    /* 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:150px;
    }

    #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: 100px;
    }
    }

    October 25, 2019 at 7:26 am #1151099
    Ismael

    Hey MLA18,

    Thank you for the inquiry.

    That is currently not possible because the logo and the main menu are inside the same container, which is where the background is applied. You may need to stick with a background behind the logo, or remove the entire header background.

    Best regards,
    Ismael

    January 8, 2020 at 10:32 pm #1171640
    MLA18

    Client has requested the addition of two more items to the main navigation menu, bringing the total number from 8 to 10. Within the CSS coding supplied above, I changed the .av-main-nav li:nth-child(3) to 5. The logo is still centered, however it just seems to be a little off-centered now, more so to the right side than absolute center.

    Also, if via Appearance > Menus I select “Menu Style – Button Style – Colored” for “Lunch & Learn”, it shifts things even further off center.

    Any advice you could provide to fix this would be much appreciated.

    Thanks in advance!

    January 9, 2020 at 8:27 pm #1171944
    Victoria

    Hi MLA18,

    Best regards,
    Victoria

    January 11, 2020 at 7:38 pm #1172438
    MLA18

    Hi Victoria,

    Yes, here is a link to a screenshot. Please note the lack of spacing on the right side of the logo and “Galleries.”

    January 14, 2020 at 12:26 pm #1173251
    Ismael

    Hi,

    Thank you for the screenshot.

    Try to apply a negative left margin to the logo to push it a bit to the left.

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

    Best regards,
    Ismael

    January 15, 2020 at 9:55 pm #1174688
    MLA18

    Perfect. That is exactly what I needed.

    As usual, thank you for your help!

    January 16, 2020 at 9:45 am #1174800
    Ismael

    Hi,

    You’re welcome! Please feel free to open a new thread if you need more help.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Logo Centered Split Menu, with Transparent Logo Area’ is closed to new replies.