[Resolved] Last Menu Item Remove Padding Right

[Mark]

Hi guys,

I have the menu item aligning to the right, but I would like to remove the padding right so the menu sits tight to the width of the right side.

I need to remove the padding right of that specific menu item.

You can see here: http://www.projectmanagementassociation.ie/ and the “Contact Us” menu item is what I am trying to set “padding-right:” to 0.

Thanks,
Mark

[Leo]

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/

[Mark]

Cheers Leo, worked perfect.

[Leo]

No problem 🙂

[Simon]

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.

[Leo]

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

[Mark]

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

[Simon]

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

[Mark]

Good stuff Simon, really appreciate that thanks.

[Author]

Posts