Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 25, 2022 at 4:19 am #1349321
    navindesigns

    How can I move my logo down a little to look like my mockup? I just need it to be moved down over the top section a little.

    Live site – http://balrajt9.sg-host.com/

    Mockup – https://ibb.co/bj4vmYm

    I am using the following CSS to put the logo in the middle of the menu items
    /*————————*/
    /* 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(2) {
    /* Adjust the width of the logo */
    margin-right:220px;
    }

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

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

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

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

    }
    }

    April 25, 2022 at 12:19 pm #1349389
    Yigit

    Hey,

    Thanks for contacting us!

    Your website redirects me to the link I attached in private content field below so I could not check your website but referring to this post should help – https://kriesi.at/documentation/enfold/logo/#overlap-logo-and-page-content :)

    Best regards,
    Yigit

    April 25, 2022 at 2:06 pm #1349410
    navindesigns

    try this

    http://balrajt9.sg-host.com/wp-admin

    Home

    April 25, 2022 at 3:01 pm #1349418
    Yigit

    Hey,

    I tried it and it redirects me to the same link.

    Have you tried the solution I shared in my previous reply?

    Regards,
    Yigit

    April 25, 2022 at 3:07 pm #1349419
    navindesigns

    That is very weird

    I have other tickets open with other Moderators and they are not experiencing this issue.

    Can another Moderator take a look at this ticket?

    April 26, 2022 at 9:04 am #1349473
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    span.logo {
  margin-top: 50px;
}

    Best regards,
    Rikard

    April 26, 2022 at 2:45 pm #1349539
    navindesigns

    Thanks

    How can I achieve the white border around it like the mockup? Does that have to be part of the logo image?

    Mockup – https://ibb.co/bj4vmYm

    April 26, 2022 at 5:15 pm #1349567
    Rikard

    Hi,

    It might be possible with CSS, but it’s easier if you add it to the actual image.

    Best regards,
    Rikard

    April 27, 2022 at 2:57 am #1349598
    navindesigns

    It is almost perfect except it is now being hidden behind the contents

    here is the css i used

    #header .logo img {
    top: 50%;
    transform: translateY(-50%);
    min-width: 200px;
    min-height: 200px;
    }

    How do I place it above the other contents? Is it something to do with z-index?

    Thanks

    April 27, 2022 at 9:05 am #1349638
    Rikard

    Hi,

    I couldn’t get it working with z-index unfortunately, but it looks like it will display everything if you make it slightly smaller. You could try to adjust the transform and min-height values.

    Best regards,
    Rikard

    April 28, 2022 at 4:54 am #1349717
    navindesigns

    Unfortunately making it smaller does not look good

    April 28, 2022 at 6:06 am #1349734
    Nikko

    Hi navindesigns,

    Please try to replace this code:

    #header .logo img {
    top: 50%;
    transform: translateY(-50%);
    min-width: 200px;
    min-height: 200px;
}

    with:

    #header .logo img {
    top: 50%;
    transform: translateY(-57%);
    min-width: 200px;
    min-height: 200px;
}

#header .logo {
    height: 180px;
    margin-top: 29px;
}

    Best regards,
    Nikko

    May 23, 2022 at 1:59 am #1352588
    navindesigns

    Thanks guys

    This looks good but there is one minor issue now. My dropdown menu is partially hidden behind the logo. Can the dropdown menu go over the logo?

    menu

    May 23, 2022 at 4:29 am #1352592
    Nikko

    Hi navindesigns,

    You’re welcome. :)
    Please add this CSS code:

    #header .main_menu:hover {
    z-index: 1000;
}

    Best regards,
    Nikko

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