Topic: Sub-menu like GeneratePress.com

MVC

September 4, 2024 at 9:17 am

Hi there!

I’m trying to make a sub-menu like GeneratePress.com where you click on Products and then see a grid of 4 pages with descriptions.

I already figured out how to display the description underneath each item, and used some CSS to display the submenu in two columns, but can’t make it look exactly like how it is on the GeneratePress website.

Is there some example code available for this?

Using this now;

<style>
@media (min-width: 769px) {

    /* Add description to menu items */
    .menu-item-has-children > .sub-menu .description {
        display: block;
        line-height: initial;
        padding-top: 0.5em;
        font-size: 14px!important;
        color: inherit;
        font-weight: normal;
    }

    /* Style the submenu container */
    .menu-item-has-children > .sub-menu {
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        box-sizing: border-box;
        background-color: transparent;
        box-shadow: none;
        border: none;
    }

    /* Style each submenu item */
    .menu-item-has-children > .sub-menu > li {
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid var(--base);
        background-color: #fff;
        transition: background-color 0.3s ease;
    }

    /* Adjust borders for items */
    .menu-item-has-children > .sub-menu > li:nth-child(2n+1) {
        border-right: none;
    }

    .menu-item-has-children > .sub-menu > li:nth-child(n+3) {
        border-top: none;
    }

    /* Apply rounded corners to the submenu items */
    .menu-item-has-children > .sub-menu > li:first-child {
        border-top-left-radius: 5px;
    }

    .menu-item-has-children > .sub-menu > li:nth-child(2) {
        border-top-right-radius: 5px;
    }

    .menu-item-has-children > .sub-menu > li:nth-last-child(-n+2):nth-child(2n+1) {
        border-bottom-left-radius: 5px;
    }

    .menu-item-has-children > .sub-menu > li:nth-last-child(-n+2):nth-child(2n) {
        border-bottom-right-radius: 5px;
    }

    /* Hover effect for submenu items */
    .menu-item-has-children > .sub-menu > li:hover {
        background-color: #FAFAFA;
    }

    /* Change text color to blue on hover */
    .menu-item-has-children > .sub-menu > li > a:hover {
        color: var(--contrast) !important;
    }

    /* Optional: Add some spacing between the columns */
    .menu-item-has-children > .sub-menu > li:nth-child(odd) {
        padding-right: 10px;
    }

    /* Style for item names */
    .menu-item-has-children > .sub-menu > li > a {
        display: block;
        width: 100%;
        font-size: 20px !important;
        font-weight: bold;
    }

    /* Ensure description text size remains the same and is not bold */
    .menu-item-has-children > .sub-menu > li .description {
        font-size: 12px;
        font-weight: normal;
    }
}
</style>

Would especially also like to use icons before the menu item names, and for it to be as lightweight as possible.

Thanks!

Alvind
September 4, 2024 at 6:16 pm

Hi there,

The GeneratePress menu use this method:
https://gist.github.com/diggeddy/d536a711522f37fd54e6118a18d80f26
MVC
September 4, 2024 at 11:25 pm

I’ve looked at it, but I’m not getting much wiser.

I’ve added the code, css, and class to a menu item, but it doesn’t seem to do much. I’m not a programmer, so I might miss something.

Some specific questions;
1. How do I center the opened submenu below the main menu item? By default it’s aligned on the left.
2. I would like people to click the menu item, and then it opens the submenu and it stays open. Same as on the generatepress website.
3. How do I add an icon before the sub menu item name?

Thanks!

MVC

September 5, 2024 at 2:06 am

I got a bit further with the code below, but will open a new topic for a more specific question.

<style>
    .site-header .main-navigation .sub-menu {
        border-radius: 10px;
        box-shadow: none;
    }

    /* Styles for sub-menu container */
    .sub-menu {
        width: 500px !important; /* Sets the width of the sub-menu */
        padding: 0; /* Removes default padding */
        margin: 0; /* Removes default margin */
        list-style: none; /* Removes default list styling */
        overflow: hidden; /* Ensures content does not overflow and affects the radius */
    }

    /* Styles for sub-menu with columns */
    .sub-menu-columns ul.sub-menu li {
        display: inline-block; /* Aligns list items horizontally */
        float: left; /* Floats items to the left */
        width: 250px; /* Sets the width of each list item */
        border: 1px solid var(--base); /* Adds 1px red border to menu items */
        border-right: none; /* Removes right border for items on the left */
        border-bottom: none; /* Removes bottom border initially */
        box-sizing: border-box; /* Ensures padding and borders are included in the element's width and height */
        background-color: white; /* Sets background color of menu items */
        border-radius: 0; /* Removes border radius initially */
    }

    /* Add right border back to items on the right (even-numbered) */
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
        border-right: 1px solid var(--base); /* Adds right border to even items */
    }

    /* Add bottom border only to the last two items */
    .sub-menu-columns ul.sub-menu li:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--base); /* Adds bottom border to the last two items */
    }

    /* Border radius for the outermost corners */
    .sub-menu-columns ul.sub-menu li:first-child {
        border-top-left-radius: 5px; /* Top left corner */
    }

    .sub-menu-columns ul.sub-menu li:nth-child(2) {
        border-top-right-radius: 5px; /* Top right corner */
    }

    .sub-menu-columns ul.sub-menu li:nth-last-child(2) {
        border-bottom-left-radius: 5px; /* Bottom left corner */
    }

    .sub-menu-columns ul.sub-menu li:last-child {
        border-bottom-right-radius: 5px; /* Bottom right corner */
    }

    /* Styles for menu item links */
    .sub-menu a {
        font-size: 18px !important; /* Sets the font size of the menu item */
        font-weight: bold; /* Makes the menu item text bold */
        display: block; /* Ensures the entire link area is clickable */
        padding: 25px!important; /* Adds padding for better spacing */
        text-decoration: none; /* Removes underline from links */
        color: black; /* Sets text color */
        transition: background-color 0.3s; /* Smooth transition for background color change */
        border-radius: inherit; /* Inherits border-radius from parent li */
    }

    /* Styles for menu item links on hover */
    .sub-menu a:hover {
        background-color: var(--base); /* Changes background color on hover */
    }

    /* Styles for menu item descriptions */
    .sub-menu .description {
        font-size: 13px !important; /* Sets the font size of the description */
        display: block; /* Ensures the description is on a new line */
        font-weight: normal; /* Keeps the description text regular weight */
        margin-top: 5px; /* Adds vertical space between item name and description */
        color: black; /* Ensures the description text remains black */
    }

    /* Keep description text color black on link hover */
    .sub-menu a:hover .description {
        color: black; /* Maintains black color for description on link hover */
    }
</style>

Alvind
September 5, 2024 at 6:41 am

Sure 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Sub-menu like GeneratePress.com