Archived topic

Logo CSS on Mobile

5 replies · Started by James on March 19, 2020

Viewing posts 1–6 of 6

March 19, 2020 at 11:09 am #1199830

Hello,

I have used the CSS code for placing the logo on the left side of the title and slogan, but on mobile the logo is pushed under the title and slogan and it pushes them up into the header image.

I'd like the logo on top and everything centered on mobile, but the code examples on here aren't working.

This is my css:

.site-header {
    background-color: #222222;
	background-size: 100% auto;
}
.site-branding {
      display: inline-block;
}
.site-logo {
      float: left;
      margin-right: 10px;
}
#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}
#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

This is how it look on a Desktop:

Desktop View

And this is the broken mobile view:

Mobile View

Any help or suggestions are appreciated

Thanks,
James

March 19, 2020 at 4:15 pm #1200054

Hi there,

Instead of using custom CSS, try the "Place logo next to title" option in Customize > Site Identity.

Let me know if that fixes it or not :)

March 20, 2020 at 1:45 pm #1201008

Hi Tom,

No that didn't fix it but it is better on mobile and unchanged on desktops.

https://www.rkcampf.com

If the logo was top/centered on mobile there would be enough room for the text to display under it without wrapping.

March 20, 2020 at 4:42 pm #1201112

Hi there,

Try this:

@media (max-width: 768px) {
    .site-branding-container {
        flex-direction: column;
    }

    .site-logo {
        margin-bottom: 10px;
    }
}

March 20, 2020 at 7:37 pm #1201168

Thanks Tom! That did the trick

March 21, 2020 at 8:14 am #1201906

Glad I could help :)

This archived topic is closed to new replies.

Start building better websites today.