Last Menu Item Remove Padding Right

Hi there,

This should work:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.menu-item-float-right a {
        padding-right: 0;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Cheers Leo, worked perfect.

No problem :)

While Leo's solution will work, it messes up the mobile menu.

A better way would be to apply 'text-align: right' to the '.main-nav' ul, de-float the last 2 items and remove the padding from the last item's anchor.

This css also lets you put the items in the correct display order, with the search item BEFORE the contact item in the menu editor.

.main-navigation .main-nav ul {
  text-align: right;
}

.main-navigation .main-nav ul li:nth-last-child(1),
.main-navigation .main-nav ul li:nth-last-child(2) {
  float: none;
  display: inline-block;
}

.main-navigation .main-nav ul li:last-child a {
  padding-right: 0;
}

You have a few un-needed css classes which are being ignored/overridden so you can safely remove all traces of both 'menu-item-float-right' and 'main-nav-no-pad-right' from your menu items and css if you use the above css code.

Ahh I forgot about mobile.

Edited the code above so it will only apply to desktop: https://generatepress.com/forums/topic/last-menu-item-remove-padding-right/#post-468493

Hi guys,

Thanks for the help. I have removed the custom classes I was using and added the CSS Simon gave. But now the sub menu is aligned right?

You can see this if you hover your mouse over the "All Courses" menu item.

Thanks
Mark

Sorry, I didn't realise you were using a drop down sub menu.

Add this to your css:

.main-navigation .main-nav ul ul {
text-align: left;
}

Simon

Good stuff Simon, really appreciate that thanks.