Archived topic
Navigation button.
9 replies · Started by moy on August 10, 2020
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?
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 :)
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
In screenshot 2, replace custom-class with nav-button.
thank you very much. it is now working.
No problem :)
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?
I'll need to see the site in question for this one.
This is my site -
https://aikubus.com
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;
}
}