[Support request] Drop down menu with border

Home Forums Support Drop down menu with border

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #291355
    Kharisma

    Hi! I just bought GP yesterday. I didn’t realize that you needed to know CSS otherwise it looks very basic. I have a theme that i like and use but it’s also limited.

    How do I copy the drop down menu look from my website? I like the border and the horizontal separators that are floating in the middle https://popnicute.com/shop/

    All I got with GP is this http://new.popnicute.com/

    GP Premium 1.2.94
    #291357
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    .main-navigation .sub-menu {
        border: 2px solid #edd3cf
    }
    
    .main-navigation .sub-menu > li > a {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .main-navigation .sub-menu > li:not(:last-child) > a {
        border-bottom: 1px solid #edd3cf;
    }
    #291366
    Kharisma

    Thank you, Tom! It works very well!

    #291488
    Kharisma

    Oh, one more thing, how do I make the text align to the left like on my other theme?

    And why is the kerning seems different on GP of the same font? It’s more compact in GP compare to the font sample at Google Fonts. I think my other site follows GF’s kerning.

    #291516
    Tom
    Lead Developer
    Lead Developer

    The sub-menu items inherit the left/right spacing of the primary menu items so the text aligns.

    You can overwrite that with this:

    .main-navigation .main-nav .sub-menu > li > a {
        padding-left: 10px;
    }

    As for the kerning, your old theme has letter spacing applied, where GP uses the default (for now, new options for letter spacing coming soon).

    Do you want to adjust it just inside the sub-menu, or everywhere?

    #291519
    Kharisma

    Oh, I didn’t know that.

    For now I’d like it for Navigation menus, primary & secondary, and for the widgets (footer, sidebar, etc).

    Thanks!

    #291524
    Tom
    Lead Developer
    Lead Developer

    Your current theme currently only has it for sub-menus:

    .main-navigation .main-nav .sub-menu > li > a,
    .secondary-navigation .main-nav .sub-menu > li > a {
        letter-spacing: 0.05em;
    }

    For all menu items:

    .main-navigation .main-nav li a,
    .secondary-navigation .main-nav li a {
        letter-spacing: 0.05em;
    }
    #291530
    Kharisma

    Thanks for the codes!

    When can we expect the font spacing to be implemented? Is it in the new GP premium that just rolled out 5 minutes ago?

    #291532
    Tom
    Lead Developer
    Lead Developer

    Not in this update, but most likely the next one will have letter spacing integrated.

    It hasn’t come up as a request a lot, but a little more lately, so I think it will be a good addition 🙂

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