Centering SVG icons in the navigation

Hi there,

I don't see the menu items with SVG icons in the page you linked.

But you could try removing the svg from menu item label, and try this CSS:

.main-navigation li:nth-child(1):before {
    content: "";
    left: 0;
    right: 0;
    top: 44px;
    height: 20px;
    background-image: url(your-svg-link);
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
}

The number 1 here means the 1st menu item: li:nth-child(1), so for second/third menu item just need to change the 1 to 2 or 3.

Feel free to adjust the number after topand height to find the best position and size for the icon.

Let me know if this helps :)

Hi Ying,

Thank you. I managed to get the icons working in the navigation items with PNG files for now .

1. I don't want to upload the SVG on my site - it's supposedly unsafe. I would prefer to inline it. How could I do that?
2. The 5th item has sub-items below it. For some reason, it's not vertically aligned correctly like the other ones. What am I doing wrong?

This is the CSS I'm using (same icon for all of them for now):

.main-navigation .main-nav ul li.logged-in-menu-item > a {
line-height: 0px;
margin-top: 48px;
padding-top: 0px;
}

.main-navigation li.logged-in-menu-item:nth-child(1):before {
content: "";

left: 0;
right: 0;

top: 0px;
height: 36px;
background-image: url('***.png');
background-size: contain;
background-position: center top;
position: absolute;
background-repeat: no-repeat;
}

The page is up now. Details below. Thank you again for your help.

If you don't want to upload SVG file, then pseudo element is NOT the way to go.

Let's go back to your method, use this one as menu item label, I'll have a look then :)
<svg xmlns=”http://www.w3.org/2000/svg” height=”36px” viewBox=”0 0 24 24″ width=”36px” fill=”#452bc2″><path d=”M0 0h24v24H0V0z” fill=”none”/><path d=”M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z”/></svg>TODAY

If you are gonna go with the png file, then change the line height in this CSS:

.main-navigation .main-nav ul li.logged-in-menu-item > a {
    line-height: 0px;
    margin-top: 48px;
    padding-top: 0px;
}

to 1.167em, the icons should be aligned.

Let me know :)

Hi Ying,

I'd prefer to use SVG, so I've put SVG icons in the menu. You can find the link below. Please let me know how to proceed.

Thanks!

Try this CSS:

.main-navigation .main-nav ul li a {
    display: flex;
    line-height: 1em;
    flex-wrap: wrap;
    justify-content: center;
}
.main-navigation .main-nav ul li a > * {
    flex-basis: 100%;
}
.main-navigation .main-nav ul li.menu-item-has-children a > .dropdown-menu-toggle {
    flex: 0;
}

Hi Ying, that works. Thanks!

You are welcome :)