How to add Css Dropdown menu on page

  • Author
    Posts
  • #2637636

    reeltechco
    Member

    I am having trouble adding a dropdown menu + “Go” button that links into another website. I have tried to use the html editor to add an Html dropdown link, but sadly, that does not let me. Please help.

    The blog I need help with is reeltechco.com.

    #2637788

    Hi @reeltechco, there are some limitations on the code we can use here at WordPress.com and doing a dropdown that will also work with touch devices (phones/tablets), isn’t really possible, so if we were to add one, it would only work on computers. Given the growing number of people that surf the web on phones and tablets, it is best to keep them in mind.

    For a “go” button, the easiest way to do that is to add a text link and assign a new CSS class to it and then add CSS rules to your custom CSS to style that link as a button. You can add the CSS class to the link you create in the page/post editor and then switch to the Text tab and ad the class callout to the code so it looks like this example.
    <a class="my-button" href="LINK_URL">GO!</a>
    You can then add the following to your custom CSS and edit/add styling as you desire. I included a hover rule so that you can have the button change colors or styling when someone hovers over it.

    a.my-button {
        background-color: red;
        border: 3px solid #000;
        border-radius: 5px;
        color: #fff;
        font-size: 140%;
        font-weight: 700;
        padding: 15px;
    }
    a.my-button:hover {
        background-color: lime;
        color: #000;
    }

The topic ‘How to add Css Dropdown menu on page’ is closed to new replies.