[Resolved] Submenus styling

[Harris]

Hello
Is it possible to replicate something like this for the submenus?

[img]https://i.imgur.com/xFZIyoR.png[/img]

[Tom]

Hi there,

You could do something like this:

.main-nav > ul > li > .sub-menu:before {
    content: "";
    width: 0; 
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;

    position: absolute;
    top: -10px;
    left: 20px;
}

[Harris]

Thanks a lot Tom!

You can check live what has been done up to now and how it looks.
I will need some more help though.

1. I need to form the arrow on the top of the sub-menu box
2. Middle lines between sub-menu choices are not showing. ( I guess the css you gave me was for that)
3. The arrrow that indicates that a sub-menu exists, breaks the alignment of the vertical dashes of the main menu choices
4. I must ommit the vertical dashes of the sub-menu choices (but keep it on main menu).
5. How can I change the sub-menu text size and weight?
6. Need to add some padding to the sub-menu box and some indent to the text.

Thanks
Harris

[Harris]

Managed to work out 3,4,5 and 6.
Still need help for 1 and 2 🙂

[David]

Hi there,

so just adjusting Tom’s code for #1 which is the arrow over the submenu:

.main-nav > ul > li > .sub-menu:before {
    content: "";
    width: 0;
    height: 40px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #0064a0;
    position: absolute;
    top: -60px;
    left: 0;
    pointer-events: none;
}

#2 border below submenu items

#menu-main-menu .sub-menu a {
    border-bottom: 1px solid;
}

[Harris]

Thanks David and Tom.
Both are great!
Everything working.

What values do I have to adjust to enlarge the top triangle?
(I tried playing with the values with no result).

[Harris]

Not sure if its right, but it works this way

.main-nav > ul > li > .sub-menu:before {
content: “”;
width: 0;
height: 30px;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid #0064a0;
position: absolute;
top: -50px;
left: 20px;
}

[David]

I adjusted the code here which is probably as big as it gets before it starts interfering with the nav.

[Harris]

Thanks David!
Appart from helping, you guys are a source of learning too.

Really appreciate it.

[David]

Thats awesome – glad we can be of assistance.

[Harris]

Hello,
The 5th option of the menu (Νέα) is supposed to be a link to a page.
The link cannot be pressed though, and I think that might be a matter of the css we added in order to achieve the submenu top triangle.
Can you please drop an eye?

Thanks
Harris

[David]

I edited the code here:

https://generatepress.com/forums/topic/submenus-styling/#post-734363

Just the first CSS rule to include: pointer-events: none;

[Harris]

Hey man! That was super quick 🙂
It works.
Thanks a lot.

[David]

Awesome. Glad to be of help 🙂

[Harris]

Hello,

I’m comming back to that one. In the mobile menu view, the menu items that have submenus, are not functioning (are not clickable. submenus can’t be reached).
I guess it has to do with the css we added in order to style the desktop menu.
Can you please have a look?

Thanks
Harris

[Author]

Posts