[Resolved] Left align content of generate_inside_mobile_header hook

[Bandara]

I’m using the generate_inside_mobile_header hook to insert some text but I can’t figure out how to make it left justified instead of right. I’m sure it must be something simple, but I’m missing it. I have a logo on the far left and I want to keep the hamburger icon on the right.

[Leo]

Hi there,

Can you give that element a class and remove the inline HTML style first?

Let me know 🙂

[Bandara]

Sure! That’s done. The class is site-title-mobile.

Do I then need to style it in custom css?

[Leo]

Try this:

@media (max-width: 768px) {
    .mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
        margin-right: 0;
    }
    .main-navigation .inside-navigation {
        justify-content: flex-start;
    }
    #mobile-header .menu-toggle {
        margin-left: auto;
    }
}

[Bandara]

Perfect!

I would have never figured that out on my own. Thank you.

[Leo]

No problem 🙂

[Author]

Posts