How to adjust "logo & menu icon" be center in mobile view?

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hi sure Leo. I sent it in the private zone already!

There wasn't a site link in the original topic.

In your screenshot, there is no navigation search icon. Where would you like to place it?

Maybe toggle on the left and search icon on the right?

Let me know :)

Hi please notice that I send the site link via the private info zone within replying to your previous answer, not in the private zone of the original thread.

And I want to make Logo & Menu icon center not search icon!

Screenshot

Hi Trang,

Are you aiming for something like this? https://share.getcloudapp.com/P8u9lBXX

If so, add this cSS:

@media(max-width:768px){
.inside-navigation.grid-container.grid-parent {
    display: flex;
    justify-content: center;
}
}

If you only want to center the hamburger icon, try this:

@media(max-width:768px){
button.menu-toggle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
}
}

Dear Elvin, thank you for your help.

I try to paste your first code like the screenshot attached, but the result is still not right. The search icon & hamburger icon is not centered.

Here is the screenshot

Hi Trang,

Give this CSS a try:

@media (max-width: 768px) {
    .main-navigation .inside-navigation.grid-container {
        justify-content: center;
    }
}

Let me know :)

Hi Ying,

Tried to insert your code into the Addition CSS section but it does still not work.

Screenshot here!

I can't see the screenshot...

That's strang, the CSS should work, I did a simulation in dev tool:
https://www.screencast.com/t/T086O6cuK

Have you tried clear your browser cache? If it still doesn't work, could you disable your cache plugin?

Let me know :)