How to create a dropdown menu with CSS

  • Unknown's avatar
    newfacesnewplacesblog · Member ·

    Hi all,

    I am currently using the social menu of my blog as my main menu. I currently have one page, the “About ” page, which is included in the menu with the following CSS:

    .entry-author .author-avatar {
    display: block;
    }

    .menu-item-148 a::before {
    content: “About”;
    margin-left: -30px;
    font-family: “Montserrat”, sans-serif;
    }

    How would I go about making this kind of button into a drop down menu? For example, I would like to have another button next to the “About” button called “Asia”, which would contain pages such as “China” and “Nepal” in a dropdown menu.

    I hope this makes sense! Thanks for your time :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    gemmacevans · Member ·

    Hi newfacesnewplacesblog,

    It’s possible to add a dropdown menu without the use of custom CSS — this type of menu is supported in the Rebalance theme. These steps will guide you through the process of setting one up:

    Menus

    A menu with China and Nepal nested under Asia can be created by selecting categories in My Sites > Customise > Menus > Menu 1:

    Menus

    The dropdown menu could certainly be styled with custom CSS though.

    If I’ve misunderstood or you have any questions, you’re welcome to reply here or start a chat :)

  • Unknown's avatar
    newfacesnewplacesblog · Member ·

    Thanks for your help!

    The dropdown menu you showed is exactly what I wanted, except for the location. I was wondering if it’s possible to use CSS to create a similar dropdown menu in the space occupied by the social menu (rather than the header menu which is used in the tutorials you linked to).

    I had previously had a link to an “About” page styled with the aforementioned custom CSS, and was hoping to build off this to make a dropdown menu. Currently I created a menu with my desired hierarchy of pages, but because it’s technically a social menu, the dropdown feature doesn’t work (nor do the words appear without custom CSS).

    Thanks again,
    Zac

    Zac

  • kokkieh · Staff ·

    Hello Zac,

    The social menu is designed to only display social media icons based on custom links you add to that menu, and that menu will only display top-level items you add to it. This is controlled in the theme’s PHP code, not through CSS alone, so CSS alone cannot be used to override that – CSS only controls the display of what’s already on the page; it cannot be used to add in information that’s not being loaded at all to begin with.

  • The topic ‘How to create a dropdown menu with CSS’ is closed to new replies.