style last item in a sub menu

2 Replies ·

  1. Could you advise how to style the last item in the submenu’s on
    https://turkeybeach.org.au/

    I just need to add a border-bottom to the last item in each sub or sub sub menu item.

    I should be able to do this, but it eludes me.
    Thanks

    BTW I would like to upgrade my membership to Premium from Standard if that is alright. I still have about 6 months to run until membership renewal time.

    Would it suit if I sent a payment of $14 which is the diff between that which I paid last time ($35) in Oct 17, and the Premium membership?

  2. Justin Tadlock

    This should handle what you’re after:

    .sub-menu li:last-of-type {
        border-bottom: 1px solid #1275d9;
    }
    

    :last-of-type or :last-child are generally what you use to style the last of something.


    As for upgrading your account, there’s no real way to handle it in that fashion. It’s something I’m working on but haven’t quite figured out at this time.

    What you can do is purchase a Premium membership. Then, I can manually reset the expire date to October 19, 2019 (current expire date is October 19, 2018). That’ll give you 1 year and 6 months on premium.

    If that’s the route you want to take, just purchase the Premium membership whenever you’re ready, and I’ll make sure you get the 1.5 years.

  3. markmcl

    Thanks for confirming to use last-of-type was the right way.
    Once I was sure of that, I realised I needed to be more specific on narrower screen widths.

    For anybody else reading this trying to work this out: my frustration was that at screen widths less than 1024px

    Using

    @media only screen and (max-width: 1024px){
    .sub-menu li:last-of-type {
        border-bottom: 0;
    }
    }
    

    does not remove the double border effect created on narrower screen widths after using

    .sub-menu li:last-of-type {
        border-bottom: 1px solid #1275d9;
    }
    

    on wider screens.

    Using

    @media only screen and (max-width: 1024px){
    #menu-primary li .sub-menu li:last-of-type,
    #menu-secondary li .sub-menu li:last-of-type {
        border-bottom: 0;
    }
    }
    

    does work.