Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 3, 2021 at 9:31 pm #1292131
    Rachel

    Hey,
    I used the CSS in the enfold doc – https://kriesi.at/documentation/enfold/menu/#toggle-id-148

    I love it!
    3 things, that I tried to find the answers to them in this forum, read all the topics, and couldn’t find it.
    1. In order for me to have 3 menu items on each side, I needed to change – li:nth-child(3) to – li:nth-child(4).
    2. I would like for the logo to be bigger.
    3. The most urgent and important problem – The new menu/logo area, isn’t responsive. the logo stays centered, but the menu itself is not adjusting to the new screen width and size. As a result, the logo is overlapping the menu items, and some of the menu items, the left ones, are disappearing to the left.

    How can I fix those?

    April 7, 2021 at 11:49 am #1293043
    Ismael

    Hey Reut Rachel,

    Thank you for the inquiry.

    1.) Yes, that is correct. Adjust the right margin after the 4th item to decrease or increase the gap between it and the 5th item, or the space for the logo.

    2.) To increase the size of the logo, you have to increase the height of the header in the Enfold > Header > Header Layout > Header Size settings.

    3.) You have to use css media queries to re-adjust the right margin of the 4th item on smaller screens, and you may need to remove this css code.

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

    Best regards,
    Ismael

    April 19, 2021 at 6:48 pm #1295328
    Rachel

    Hey Ismael

    1. thank you.

    2. I’ve tried to change the header size this way, before asking your help – it didn’t work. the header size is bigger, but the logo itself stey at the same size.

    3. thanks, that worked :)

    April 21, 2021 at 6:49 am #1295690
    Ismael

    Hi,

    2.) What is the actual size of the logo image that was uploaded? You may need to re-select it from the Theme Options, and make sure to select the full size and not the thumbnail version of the logo image.

    Best regards,
    Ismael

    April 21, 2021 at 11:07 am #1295762
    Rachel

    Hi,
    The actual size ia 1080×1080 px.
    I’ve already selected the full size before asking for your help :)

    Also, I’ve changed the logo image file a few times and nothing seems to work.

    April 22, 2021 at 11:42 am #1296003
    Ismael

    Hi,

    Thank you for the inquiry.

    Looks like you are not using a logo with transparent background. We can use this css code to adjust the size of the logo but it will overflow outside the header container.

    #header .logo img {
    max-width: 200px;
}

.logo, .logo a {
    height: 200px;
}

    Best regards,
    Ismael

    April 22, 2021 at 1:17 pm #1296044
    Rachel

    Hey Ismael,

    Thank you so so so so much.
    That works!

    April 24, 2021 at 2:42 am #1296448
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    April 25, 2021 at 2:36 pm #1296609
    Rachel

    You can close, thank you.

    April 26, 2021 at 10:04 am #1296708
    Ismael

    Hi,

    No problem! Please feel free to open another thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Logo Centered split menu is not responsive’ is closed to new replies.