[Resolved] Navigation button.

[moy]

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?

[Leo]

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 🙂

[moy]

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

[Leo]

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

[moy]

thank you very much. it is now working.

[Leo]

No problem 🙂

[moy]

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?

[Leo]

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

[moy]

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

[Leo]

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;
    }
}

[Author]

Posts