Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Last Menu Item Remove Padding Right

Home Forums Support [Resolved] Last Menu Item Remove Padding Right

Home Forums Support Last Menu Item Remove Padding Right

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #468233
    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

    #468493
    Leo
    Staff
    Customer Support

    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/

    #468503
    Mark

    Cheers Leo, worked perfect.

    #468531
    Leo
    Staff
    Customer Support
    #468548
    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.

    #468550
    Leo
    Staff
    Customer Support

    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

    #471185
    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

    #471231
    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

    #471232
    Mark

    Good stuff Simon, really appreciate that thanks.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.