Archived topic

Drop down menu with border

8 replies · Started by Kharisma on March 14, 2017

Viewing posts 1–9 of 9

March 14, 2017 at 11:41 am #291355

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/

March 14, 2017 at 11:44 am #291357

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;
}

March 14, 2017 at 12:17 pm #291366

Thank you, Tom! It works very well!

March 14, 2017 at 2:18 pm #291488

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.

March 14, 2017 at 2:43 pm #291516

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?

March 14, 2017 at 2:46 pm #291519

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!

March 14, 2017 at 2:57 pm #291524

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;
}

March 14, 2017 at 3:03 pm #291530

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?

March 14, 2017 at 3:05 pm #291532

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 :)

This archived topic is closed to new replies.

Start building better websites today.