Logo position for mobile and desktop version

Hello,

I need the logo at the left side and at the same height as the menu. If I use the following code I have problems with diffrent screen resolutions:

.site-logo {
    position: absolute;
    left: -13%;
    margin-top: -0.3%;
}

@media only screen and (max-width: 768px) {

.site-logo {
    position: absolute;
    left: 10%;
    margin-top: -1%;
    height: 60px;
}

so I need code that works for all resolutions, desktop and mobile version.

thanks a lott!

Hello Bent,

Please check this topic:

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

Kind Regards, Roman.

Hello Roman,

thanks a lot, it works!

There is one more issue left. The logo ist on the left side, like I was looking for, but there is to much space under it, the space to top is fine (I´m using the header type “No header (only menu)”. So I want the header height to get smaler (without a logo the height is fine).

kind regards

Bent

Great! You are welcome Bent :slight_smile:

And have a nice day!

Kind Regards, Roman.

Can you please provide some explanatory screenshots and a link to your website in order to let me help you with your other issue?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).

Kind Regards, Roman.

Hey Roman,

the page is not ready yet, so can I send you a PM ?

kind Regards

Bent

Hello Bent,

You can send it here:
[hidden]
Please include a link to this topic.

Kind Regards, Roman.

thanks!

I wrote you a massage. Did you get it?

kind regards

Bent

Hello Bent,

You didn’t add a link to this topic into your message as I asked above, so I deleted your message because I didn’t know what is the related forum topic. Fortunately I was able to find it in trash folder.

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#masthead .site-logo,
#masthead .col-md-4.col-sm-8.col-xs-12 {
    margin-bottom: 0;
}

Kind Regards, Roman.