How to center the logo on mobile website?


#1

Hi, I have placed my logo in the middle for the desktop version but it is still on the left side on the mobile. Anyone knows how to move the logo to the center on the mobile too?


#2

The default layout for logo in mobile is left aligned to avoid further complications with menu and … You might want to edit this behaviour by adding your own custom CSS in specific range of widths.


#3

Thank you Rouzbeh, and yes I know about it and I was trying to find where the code is for… but was not a ble to find. Do you think you can help me changind the CSS?

The website address is:
sbgroupe.com/standard-graphene

Thank you in advance…!!! :smile:


#4

I can add this as a feature request. It is actually a cool feature which you can have more control over you header layout in responsive views so you can automatically set it in admin panel. No need for custom CSS. How about that? :smile:

Btw such a gorgeous website you designed…


#5

I am interested in having the logo centered on mobile as well. When will this feature be implemented please?


#6

Can you point to where we should begin CSS wise when it comes to centering the logo in the mobile queries. You know, just to save a but of time?

c.


#7

Hello @Carlos_Casarez,

What header style are you using?
Please try to use this code in Theme Options > Advanced > Custom CSS:
@media (max-width: 480px) {.header-style-1 .header-logo {
right: 65px !important;
text-align: center;
}}

Best regards,
Artbees Support.


#8

@Tatyana_Hutsol thanks for the quick response. It says I am using style 1.

I ended up having to mess with the width for it to align the way I needed it to. I used this for anyone wondering. It worked on header styles 1 and 3. I didnt try any of the othere.

@media (max-width: 480px) {.header-style-1 .header-logo { text-align: center; width: 55%; }}

Thanks again for your help.

c,


#9

@Carlos_Casarez we’re glad you managed to resolve the issue.
Feel free to contact us if there are any questions.

Best regards,
Artbees Support.


#10

Hi Tatyana,

I have tried the code you suggested but it didnt’ work on my website.

@media (max-width: 480px) {.header-style-1 .header-logo {
right: 65px !important;
text-align: center;
}}

Is this still valid code to center the logo?


#11

Hello @mel_lee,

Please provide your site URL to check the issue.

Best regards,
Artbees Support.


#12

Hi Tatyana,

the website address is:

Thank you!


#13

Hello,

As I see your logo is centered on mobile https://prnt.sc/iv652z .
Can you show a screenshot from your side? Also specify what mobile device you’re using.

Thank you.
Best regards,
Artbees Support.


#15

Hey. I tried this code, but it doesn’t seem to work. Have you changed it?


#16

Hello,

Please share your site URL to check the issue.

Thank you.
Best regards,
Artbees Support.