Home Support Total Primary Menu Button

This topic contains 4 replies, has 2 voices, and was last updated by  jrotella 6 days, 7 hours ago.

  • Author
    Posts
  • #3095

    jrotella
    Participant

    Hi,
    (Someone with minimal CSS knowledge here)
    I would like to create a “Request Information” button on the primary navigation bar. I used this article for help: http://kb.wpbeaverbuilder.com/article/166-add-buttons-to-your-navigation-menu

    But I don’t know the class name for the navigation bar/button.

    Can anyone help me with the CSS? Thanks so much!

  • #3107

    HashThemes
    Keymaster

    Hi,

    You can add the menu items from the menu page. But if you need to make it button that is different from the other menu item then you need to style the menu item with some additional CSS.

    The class name won’t be same of all website so you need to find the class name of the menu item by using the inspect feature provided by browser.

    Thanks

  • #3113

    jrotella
    Participant

    Yes, I know it requires additional CSS. Since I have little CSS knowledge, I’m going to need a little additional help to find the CSS of the class name and how to incorporate that into the site.

    Do I inspect the home page or the page of the menu item?

    What is the CSS I should put into the “Additional CSS” field to make the menu item into a button? Basically all I want to do is keep the hover CSS for that one menu item 24/7, since the hover of this theme already makes it into a button.

  • #3114

    jrotella
    Participant

    Okay, so I figured out how to change the class name of the menu item. Now, I changed it to “ss-nav-button” so that it was consistent with this article:

    http://kb.wpbeaverbuilder.com/article/166-add-buttons-to-your-navigation-menu

    I placed the EXACT CSS from the above article into the “Additional CSS” field of the theme.

    Nothing happened. I’m sure there’s another step, but this is where I get stuck. Any help would be greatly appreciated.

    Thanks.

  • #3116

    jrotella
    Participant

    UPDATE: (Still need more help, read on)

    I was able to figure out the CSS using other websites. Here is the CSS that worked. I made the Class name “test” just to make sure I got it to work.

    .test a {
    background-color: #9d0520;
    color: #ffffff;
    padding: 0px 5px;
    border-radius: 3px;
    border: 0px solid #ff0000;
    font-size: 18px;
    }

    HOWEVER, the hover is not working properly. Below is the CSS associated with the hover of the button. All I want is the color to change upon hover:

    .test a:hover {
    background-color: #444444;
    }

    What am I doing wrong for the hover?

You must be logged in to reply to this topic.