While I've been using WordPress for a considerable amount of time, it's important to note that my coding skills are limited. I typically rely on themes and make customizations as necessary rather than building from scratch. When faced with challenges, I usually resort to trial and error, but after struggling for 2 days without success, I decided to seek help.
Currently, I am collaborating with an author to update her website (). She wants her flying pig logo to be placed next to the menu item "Why Pigs Fly". After researching, I found a plugin (https://wordpress.org/plugins/nav-menu-images/) that enables image insertion within the menu. However, the image seems to cause alignment issues by pushing down the "Why Pigs Fly" text compared to other menu items, most likely due to baseline alignment instead of center alignment.
I considered resizing the image to resolve the problem, but reducing its size would make it less visible. Is there any code that can vertically align both the image and text efficiently?
The theme I'm currently using is Arctica Theme by AIT Themes. The instructions suggest making changes in the style.less.css file. Here is the relevant menu information included in it:
/*** main menu ***/
.fixed {position:relative;}
#fixedmenu {position:fixed; min-width: 1024px; margin-bottom:20px;z-index: 1100;}
#fixedmenu .flags { position: absolute; top: 18px; right: 30px; padding: 0px; display: block; }
#fixedmenu .flags a { display: block; float: left; margin-left: 8px; border: 1px solid @linesColor; }
#fixedmenu .flags a.active { margin-left: 18px; }
#fixedmenu .flags a img { vertical-align: top; }
// More CSS styles...
Your assistance or suggestions on how to address this issue would be greatly appreciated. Thank you!