Primary Menu Button

Home › Forums › Total › Primary Menu Button

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 15, 2017 at 11:41 pm #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:

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

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

    June 18, 2017 at 8:51 am #3107
    Hash
    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

    June 19, 2017 at 7:24 pm #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.

    June 19, 2017 at 7:46 pm #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:

    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.

    June 19, 2017 at 8:46 pm #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?

    July 14, 2017 at 11:10 pm #3184
    Hash
    Keymaster

    @jrotella i think that CSS would not work. If you could write your website url, we could help you with CSS

    July 14, 2017 at 11:26 pm #3189
    jrotella
    Participant

    I got it. Here is the successful code:

    .test a{
    background: #9d0520;
    color: #ffffff;
    }

    .test:hover a{
    background:#444444!important;
    color: #fff;
    border:none!important;
    }

    July 15, 2017 at 12:06 am #3202
    Hash
    Keymaster

    How did you add the class so called test in the menu? or is it just dummy class

    July 15, 2017 at 1:01 am #3204
    jrotella
    Participant

    It’s the CSS class for that particular menu item. I changed it by going to Appearance>Menus>Screen Options (Top right corner) >Checked “CSS Classes”

    July 15, 2017 at 3:37 am #3205
    wpnewb
    Participant

    Thank yoooooooou!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.
Scroll Top
Scroll Bottom