Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 29, 2026 at 4:13 pm #1496411
    steviger

    Hi guys,

    I’d like to have the logo overlapping the header on mobile. I got it working fine on desktop but I couldn’t get it working on mobile. Any tips?

    Best regards,
    Steven

    This is the CSS I used for desktop:

    /*LOGO SIZE AND PLACEMENT*/
.logo svg {max-width: 350px; height: 390%; max-height: 390px !important;/*max width and amount of overlap*/}

@media only screen and (min-width: 990px) { /*Center logo desktop*/
    .responsive .logo {
        left: 50%;
        transform: translateX(-50%); 
	}}

#top .logo,#top .logo a{overflow: visible;/*enable logo overlap*/}

    For mobile I tried:

    @media only screen and (max-width: 767px) {#top .logo, #top .logo a{overflow: visible;/*enable logo overlap on mobile*/}}
	
@media only screen and (max-width: 767px) {.logo svg {max-width: 200px!important;height: 490%; max-height: 490px !important;}}

    But that didn’t work …

    • This topic was modified 2 hours, 40 minutes ago by steviger.
    March 29, 2026 at 4:26 pm #1496412
    Mike

    Hey steviger,
    Do you mean like this:
    B92Dn4I.md.png
    try this instead:

    @media only screen and (max-width: 767px) {
    .responsive .logo svg {
        transform: translateX(38%) translateY(63%);
    }
}

    Best regards,
    Mike

    March 29, 2026 at 5:00 pm #1496413
    steviger

    Hi Mike,

    Thanks for your super quick reply! That code did the job.

    Best regards,
    Steven

    March 29, 2026 at 5:30 pm #1496416
    Mike

    Hi,
    Glad that we could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘[SOLVED]Make SVG logo overlap heade on mobile’ is closed to new replies.