Adding Image to primary menu

[Caetlyn]

I’m trying to add a logo image into my menu (i.e. as part of the main menu). However, when I look at it on the frontend, the menu items are aligned at the top of the image instead of the center.

How do I achieve this with css?

[Weaver]

Don’t really have enough info here to answer reasonably.

But to start, look at the full screen menu of this site – Weaver Xttreme. It is part of the main menu. So you mean something like that? Please be more specific, and provide a link to the site in question if possible.

 

[scrambler]

Site link please

[Caetlyn]

Website – https://craftylion.com

[scrambler]

This reply has been accepted as the best answer.

The rule below can make all items the same height as the image (56px), center them vertically, as well as reducing/removing the existing vertical padding

.is-desktop .wvrx-menu a {
line-height: 56px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}

Adjusting the line height to the image height, and eventually not reducing the top/bottom padding all the way to zero if desired

 

[Author]

Posts