[Resolved] Submenus styling

Home Forums Support [Resolved] Submenus styling

Home Forums Support Submenus styling

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #733649
    Harris

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

    GeneratePress 2.2
    GP Premium 1.7.4
    #733884
    Tom
    Lead Developer
    Lead Developer

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

    #734271
    Harris

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

    #734363
    David
    Staff
    Customer Support

    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;
    }
    #734382
    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).

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

    #734401
    David
    Staff
    Customer Support

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

    #734405
    Harris

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

    Really appreciate it.

    #734413
    David
    Staff
    Customer Support

    Thats awesome – glad we can be of assistance.

    #809422
    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

    #809426
    David
    Staff
    Customer Support

    I edited the code here:

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

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

    #809432
    Harris

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

    #809434
    David
    Staff
    Customer Support

    Awesome. Glad to be of help 🙂

    #844066
    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

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