[Resolved] Align submenu left edge with top menu text

[Ola]

Hi!

Trying to implement GP on my site. In the top menu, currently the top item and submenu are left aligned at field level; and thus the text between the levels are aligned.

I am using a top border to mark the submenu and that type of alignment looks a bit weird.

I’d like for the left edge of the submenu “box” to be aligned with the left edge of the corresponding text in the main menu above. (The text in the submenu will be indented somewhat relative to the text in the main menu).

How can I do that?

Thanks!

/O

[David]

Hi there,

can you share a link to your site so i can see the current layout.

[Ola]

Absolutely; the staging site is: https://www.stag1.ikigai.se/

/O

[David]

Try this CSS:

.main-navigation:not(.toggled) ul li.sfHover > ul, 
.main-navigation:not(.toggled) ul li:hover > ul {
    left: 10px;
}

[Ola]

Great! Works like a charm!

Thanks!

/O

[David]

You’re welcome

[Author]

Posts