Mobile Logo Position

[digitalprincepts]

#444908

Hello, How do I center the logo on mobile when using header 4? I have the logo position set to center but it is aligning left on mobile devices.

[Sky-Life]

#461592

I have the same problem. Usually centering logo only works on header 5, which I used, but still the logo aligns itself to the left at responsive menu breaking point.

[Wibernet]

#505791

Did you ever find out how to do this on header 4?

[Troutmagnet]

#506487

I managed to do it on 5, but I haven’t used it on 4.

I ended up using a plug-in called Site Origin CSS in conjunction with Chrome’s Developer Tools. Then I created a media query:

@media only screen and (max-device-width : 667px) {
}

Your target div is:

div.fusion-header

Your logo target is:

img.fusion-mobile-logo

…then inserted the code to fiddle with the spacing relative to my logotype shape.

Seemed to work well. My problem is I want to stack the logo on top of the hamburger icon, but the div surrounding the logo and doesn’t want to play nice.

[feerickservice]

#590390

@TroutMagnet: Did you ever find out how? That’s what I would like to do too.

[ashik93]

#660823

Try this, it will work

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

.fusion-mobile-logo{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
}

[gafo84]

#660841

I have the same problem, but it does not work…

[marklchaves]

#661030

Hi Everyone,

From what I’ve seen in the CSS that’s forcing the logos to be on the left is float: left.

If you see this happening on your page, then try using this for displays smaller than a tablet.

@media screen and (max-width: 767.998px) {
	.fusion-logo {
		float: none !important;
		text-align: center;
	}
}

Share & enjoy! 🙂

[Jesulin]

#833422

I have the same problem.
none of the CSS code work.

Did anyone know how to do it?
I would like to do too.

[peterkinvara]

#846028

This worked perfectly for me.
Thank you @marklchaves

@media screen and (max-width: 767.998px) {
.fusion-logo {
float: none !important;
text-align: center;
}
}

[Author]

Posts