How can I relocate my logo within the Prestige theme header?

[User27272727272]

Hi there! I would like to move my logo to be placed inbetween the menu items

Here I have marked it, maybe this would give it a better idea.

web: needsomemore.com

pw: NSM17042023

I hope someone can help me out,

thanks in advance!

[SanjuBarad]

hello @User27272727272

add this css to your .CSS file at last

@media (min-width: 1140px){
    .Header__Logo img {
        transform: translateY(140%);
    }
}

and after then add this Javascript(jQuery) code to your .JS file at last

var logoWidth = $('.Header__Logo').width();

var navigationChild = $(".Header__MainNav .HorizontalList .HorizontalList__Item");

$('.Header__MainNav .HorizontalList .HorizontalList__Item:nth-child(' + Math.round(navigationChild.length/2) + ')').addClass('first-half').css('margin-right', Math.round(logoWidth/1.5) + 'px');
$('.Header__MainNav .HorizontalList .HorizontalList__Item:nth-child(' + Math.round((navigationChild.length/2) + 1) + ')').addClass('second-half').css('margin-left', Math.round(logoWidth/1.5) + 'px');

[User27272727272]

@SanjuBarad Thank you for your solution, I’ve tried to implement your solution but its not what I wanted it to look like. The positioning is a bit off and not inline with the icons on the right. Is it possible to level it and maybe space the logo a bit from the menu buttons?

[SanjuBarad]

Hello @User27272727272

You just have to update this selector transform property value

.Header__Logo img {
    transform: translateY(130%); 
}
/* Try to change 140% or 145%, or also try 47px  */
/* after then check the preview */

[User27272727272]

@SanjuBarad
Hi there! thanks for your approach, but sadly it does not work

[User27272727272]

Hi there, @SanjuBarad , See picture for the vision that I have