Topic: Vertically center image in menu

harris
November 21, 2025 at 5:25 am

After adding an image to the menu (as per the link above), how can I vertically center it with the rest of the menu text?

https://generatepress.com/forums/topic/adding-image-to-nav-menu-and-my-account-icon/
Ying
November 21, 2025 at 9:34 am

Hi there,

Can you link me to your site where i can see the image in the menu?
harris
November 21, 2025 at 10:15 am

The site is live, so I would prefer not to add the image to the menu before knowing how to center it.

The site is that (in case it helps without the image). The image will replace the last menu choice (both in navigation, sticky navigation / header and mobile navigation)

https://papapavlou.edu.gr/

I can provide admin credentials if needed.
Ying
November 21, 2025 at 12:26 pm

I do not need admin login, but I do need to see the image being added to the menu so I can work on the CSS.
harris
November 21, 2025 at 1:14 pm

Ok I have added it and it actually looks quite centered in the main menu but a bit less centered in the sticky menu. Please have a look.

Another question. Is there some way to remove the line hover effect (only) for that menu choice?
harris
November 21, 2025 at 1:16 pm

And one more question.
If I remember well, there was a hook, used to add content in the header, after the navigation.
Can you remind me how to use that?
Ying
November 21, 2025 at 1:44 pm
Try removing the 30px padding top you added to the image, and add this CSS:
```
.main-navigation li:has(img) a {
    display: flex;
    align-items: center;
    min-height: 92px; /*menu item height*/
}
.main-navigation.is_stuck li:has(img) a {
    min-height: 95px;
}
```
And can you go to customizer > general, check if you are using floats strcture, if so, change it to flex.

If I remember well, there was a hook, used to add content in the header, after the navigation.
Can you remind me how to use that?

Yes, you can create a block element – hook at appearance > elements, set the hook name to after_primary_menu, and set the location to entire site. Add the image to the element.
harris
November 22, 2025 at 12:58 am

Hello,

Thanks for your assistance.
I did all that but it didn’t look much centered.
It actually looked more centered in the normal header (but not in the sticky one) before changing from floats to flexbox.

I worked it out via the hook though.

Another question that came up after that, is:
Is there some way to control where exactly this hook appears in tablet and mobile view?
Ying
November 22, 2025 at 6:03 pm

It looks centred to me, on both sticky and non-sticky navigations.

Is there some way to control where exactly this hook appears in tablet and mobile view?

Yes, with CSS.
Where do you want it to show?
harris
November 23, 2025 at 12:37 am

Hello,
It looks centered since I used the hook to place it after the menu.
When I had the image added inside the menu it didn’t looked centered.

About the hook, Let me see if I finally want to chasnge its position and if so I will come back.

Thanks a lot!
Ying
November 24, 2025 at 8:12 am

You are welcome 🙂

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Vertically center image in menu