Change position on the header logo

Hello,

How can I change the position on the header logo in the welcome-area for single pages with extra CSS code? I would like to change the position to the top right corner.

Thank you in advance!

Hello,

I would be glad to help you, but can you please provide a link to your website and some explanatory screenshots?

Kind Regards, Roman.
aThemes Support

Hello,

Thank you for your reply!
Here is a link to the website.

I have tried with some extra css code, but couldn’t get it the way I wanted from the beginning. So I changed the position slightly to the left instead, but my problem is that if I move the position of the “organisation logo” more to the left, some part of the logo will not be shown on smaller devices (tablets/mobiles).

Here is an image of the organisation logo.

I’ve added the following extra CSS code to the website - I do not know if the extra CSS code is correct … I was just trying …

.welcome-logo {
    top: -60px;
	left: -130px;
    position: relative; 
}

Maybe there is a better way to fix this with some other extra CSS code?
Thank you in advance!

Kind regards,
trew

Hello, thank you for the links.

I would like to change the position to the top right corner.

Try to use this CSS code instead of what you mentioned above:

#masthead .welcome-info {
    top: 0;
}

#masthead .welcome-logo {
    margin-right: 0;
}

You can add CSS code in Customize → Additional CSS section.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi again Roman,

Thank you so much for your help!!
I have tried the CSS code and it works great in desktop mode and tablet mode, but unfortunately in mobile mode it’s still centered. Is it possible to add some extra CSS code to the code you wrote? I hope so :slight_smile:

Again, thank you very much for your help!!

Kind regards,
trew

Hello,

Just crop the empty space around your header logo image. You can do it in your Media Library.

Kind Regards, Roman.
aThemes Support

Hi again Roman,

Thank you for your reply!!
Unfortunately, it didn’t helped! The logo image is still centered in mobile mode.

Kind regards,
trew

Hi again Roman,

I resized the image so it got a bit smaller, and now I can see that the logo image is slightly to the side from the midpoint in mobile mode, but the logo is to big on mobile devices to be able to get the position in the top corner. Is it possible to have a different size on the logo for mobile devices? Because if the logo was smaller on mobile devices the position would be at the top corner.

Is it possible to get an exact position for the image logo on desktop devices (margin and top)? I added px to the extra CSS code you wrote in your reply yesterday and it seems to work. The only thing is that the position of the logo image looks different on desktop/tablet/mobile. Is it possible to adjust that?

#masthead .welcome-info {
    top: 30px;
}

#masthead .welcome-logo {
    margin-left: 50px;
}

Thank you very much for your help!!

Kind regards,
trew

Hello, try to add this CSS code:

@media (max-width: 640px) {
    #masthead .welcome-logo {
        margin-left: 7vw;
        max-width: 34vw;
    }
}

Kind Regards, Roman.
aThemes Support

Hi again Roman,

Thank you so much for your help!! :slight_smile:
It works really, really good!!! It’s awesome!!! Excellent!!! :slight_smile:

Thank you SO MUCH for all your help!!!

Kind regards,
trew

Great! You are welcome :slight_smile:

Kind Regards, Roman.
aThemes Support

P. S.
By the way, it would be nice if you leave your feedback for Moesia theme on WordPress.org (if you haven’t done it already, of course), here is a quick link :slight_smile:

Absolutely!! Thank you so much for all your help!! :+1::+1::+1:

Kind regards,
trew

You are welcome!

And thank you for the feedback! :slight_smile:

Kind Regards, Roman.
aThemes Support