[Resolved] Navigation button.

Home Forums Support Navigation button.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1396271
    Subarnamoy

    In the navigation bar, I have created a subscribe page. So I visited this page and tried to convert the subscribe option into ghost button. But for some reason, subscribe option is not turning into the button. I don’t know what I am doing wrong. And I also like to give it a hover colour changing effect.

    Will you be able to help me out?

    #1396396
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1397523
    Subarnamoy

    Whatever I did to add the button, I captured the screenshots of each of the steps that I followed. And I named the screenshots accordingly.

    https://drive.google.com/drive/folders/13p_7spv16NPh_shF6ytDY_sQ6GLdL4AO?usp=sharing

    #1397839
    Leo
    Staff
    Customer Support

    In screenshot 2, replace custom-class with nav-button.

    #1397860
    Subarnamoy

    thank you very much. it is now working.

    #1397863
    Leo
    Staff
    Customer Support
    #1399595
    Subarnamoy

    I like to create hover effective on the subscribe ghost button.
    right now “Subscribe’ is turning into black from orange and the border colour stays the same. I like to create the same hover effect on both button and subscribe option.
    Is it possible to make the change?

    And I am using navigation as header & sticky navigation so the button is getting bugger when i am scrolling down. I don’t want the button to change it’s size. is it possible?

    #1399739
    Leo
    Staff
    Customer Support

    I’ll need to see the site in question for this one.

    #1399796
    Subarnamoy

    This is my site –
    https://aikubus.com

    #1399801
    Leo
    Staff
    Customer Support

    So this is your current CSS:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background-color: #fff;
            border: 2px solid #ff4e00;
            color: #ff4e00;
            line-height: 40px;
        }
    }

    Edit to this to include the hover effect and fix the height issue:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background-color: #fff;
            border: 2px solid #ff4e00;
            color: #ff4e00;
            line-height: 40px !important;
        }
        .main-navigation .main-nav ul li.nav-button a:hover {
            background-color: #000;
            border: 2px solid #ff4e00;
            color: #222;
        }
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.