Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Support request] Custom button class, can't get it to work

Home Forums Support Custom button class, can't get it to work

This topic contains 5 replies, has 2 voices, and was last updated by  Leo 1 week, 2 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #444162

    Hi there,

    I’ve almost got my site right where I want it, but for the life of me can’t figure out how to isolate the button in my main navigation and change JUST THAT BUTTON to a different color. I want just that “make an appointment button” to be pink instead of grey like all the other buttons on the site (as specified in the buttons section of the customizer).

    What’s the CSS I’d need for this? I was able to create a unique class for the background “.nav-button-background” but that affects the whole block on the navigation bar.

    TIA!

    GP Premium 1.5.6
    #444213

    Leo
    Staff

    Hi there,

    This article should be helpful: https://docs.generatepress.com/article/adding-buttons-navigation/

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #444391

    Yes, I am using the class “nav-button-background” to style the hover and rollover of that whole selection on the menu (in the CSS custom class section of that menu item). By enclosing the item’s navigation label with “button id=button” it shows my styled button within that. But when I try to alter that button id with another to style it further without affecting all of the “button” CSS on the entire site, it isn’t working. Can you see my site? You can see what I mean when I say I have a button floating inside a “nav-button-background” styled menu item so it floats within the wide navigation band.

    Here’s what I had tried with CSS, but it doesn’t work:

    @media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
    background-color: #bc3273 ;
    color: #ffffff;
    }
    .nav-button {
    width:220px;
    }
    .nav-button {
    padding: 15px;
    }
    .nav-button {
    text-align: center;
    }

    What am I missing? I even tried “important” but unless I put it in the wrong area, it’s not working.

    #444451

    Leo
    Staff

    You added custom class nav-button-background but you are targeting .nav-button in your CSS.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #444813

    Hi again Leo,

    I added both of them and I am targeting both of them with different styles. I didn’t show the styles for nav-button-background because they are working fine, but the .nav-button ones aren’t, even when I IMPORTANT them.

    #444930

    Leo
    Staff

    I still only see one class, nav-button-background, added to the menu item custom class: http://www.screencast.com/t/olnSdFdB7

    You shouldn’t need both, just pick one and target that with the CSS.

    Also try using this selector:
    .main-navigation .main-nav ul li.nav-button instead of just the class.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

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

You must be logged in to reply to this topic.