Box Around Menu Item and Font Color change for one menu item

Shapely
1

I would like to create a box around the last menu item in the main navigation and change the font to #fff so that it stands out.

The box color should be #5d47d7.

Can someone help me with the css for that?

@movin?

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to add a border to the last item by going to Appearance > Customize > Additional CSS and pasting it there.

/*Menu border*/
.main-navigation .menu li:last-child {
    border: 3px solid red;
    padding-left: 10px;
    padding-right: 10px;
}

/*Nav bar height*/
.nav-bar {
    height: 70px;
    max-height: 70px;
    line-height: 53px;
    padding-top: 6px;
}

Best Regards,
Support

3

Great! That wasn’t exactly what I was looking for, but it helped me figure out the desired look.

I really appreciate the help!

4

Hello there,

I am glad the solution helped you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support