Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 5, 2023 at 6:33 pm #1412534
    buntrosgali

    Hi guys

    Its been years since i did a site, but its coming to me again. I really want my logo to be larger than the header area, here is an example of what i mean : Example

    From looking at their source code the logo is a SVG file.

    I have never used an SVG before, i do have the vector of our logo and have illustrator so i can create an SVG through it.

    Can you direct me how I can go about making my logo larger than the main header area please?

    July 5, 2023 at 8:50 pm #1412552
    Rikard

    Hey buntrosgali,

    Please try the following in Quick CSS:

    span.logo {
  margin-bottom: -30px;
}

    Best regards,
    Rikard

    July 5, 2023 at 8:57 pm #1412553
    buntrosgali

    Hi Rikard

    I have made my logo now 180px high but and added the code above to the quick css but it is still inside the header area and being restricted to the height of the header.

    • This reply was modified 1 year, 4 months ago by buntrosgali.
    July 6, 2023 at 4:14 am #1412585
    Ismael

    Hi,

    Thank you for the update.

    The following css code should adjust the size of the logo and allow it to extend out of the header container.

    #top .logo a, #top .logo {
    height: 130%;
    overflow: visible;
}

    Please make sure toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the code to make sure that the changes take effect.

    Best regards,
    Ismael

    July 6, 2023 at 5:31 am #1412588
    buntrosgali

    Super! thanks for that, is there something I can do to make it work even in mobile mode? right now it shows the overflow on just larger screens.

    and

    1 other question, how can. I add ease in out animation to the logo when you scroll over it as shown in the link example on my original post

    thanks

    • This reply was modified 1 year, 4 months ago by buntrosgali.
    July 6, 2023 at 8:32 pm #1412629
    Rikard

    Hi,

    Please try the following CSS as well:

    @media only screen and (max-width: 767px) {
#top .logo a {
  top: 10px;
  width: 120px;
}
}

    Best regards,
    Rikard

    July 7, 2023 at 9:37 pm #1412711
    buntrosgali

    Super thank you so much guys this is awesome help!

    July 8, 2023 at 8:12 pm #1412763
    Rikard

    Hi,

    Great, I’m glad that we could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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