Menu Button

[Pothe]

Hi
I want the last menu link to appear as a button. Is there a way to apply the button class?
Thanks

[Mohammad – SUPPORT]

Hi,
Please share your website URL so i can suggest you easily .
Cheers!
With Best Regards
Swiftideas Themes

[Pothe]

Thanks
http://www.forestnation.com

“My FN” I want to display as a button.

[Mohammad – SUPPORT]

Hi,
I am very sorry that it is not possible . I tried but it need a lot of customization and menu navigation is also breaking .

With Best Regards
Swiftideas Themes

[Pothe]

Ok, thanks for trying.
I’ll make do with the icons for now.
Thanks again

[Kyle – SUPPORT]

Hi @Pothe

You can try using this css:

nav#main-navigation .menu li:last-child a {
  border: 2px solid #333;
  border-radius: 2px;
  padding: 10px 17px 12px !important;
  -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
}
nav .menu li:last-child a:hover {
  background:#333;
  color: #fff !important;
}
nav .menu li:last-child a > span.nav-line {
  opacity:0;
}

You will have to edit some of it, for e..g the colors and the padding, as this css is pulled straight from my website.

If you add it to your css and it looks weird, let me know and I will clean it up for you.

– Kyle

[Pothe]

Thanks, that’s awesome!!

[Kyle – SUPPORT]

Great! Glad I could help

– Kyle

[Pothe]

Hi Kyle,
It works, but also affects all the sub menu items.
Is there a tweak to prevent this?

[Swift Ideas – Ed]

Give this a try instead:

nav#main-navigation .menu > li:last-child a {
  border: 2px solid #333;
  border-radius: 2px;
  padding: 10px 17px 12px !important;
  -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
}
nav .menu > li:last-child a:hover {
  background:#333;
  color: #fff !important;
}
nav .menu > li:last-child a > span.nav-line {
  opacity:0;
}

– Ed

[Kyle – SUPPORT]

Thanks Ed!

[Mohammad – SUPPORT]

Great work . Thanks Ed!

[Pothe]

Perfect, Thanks a lot! 🙂

[Kyle – SUPPORT]

No problem

[Pothe]

one last thing 🙂

I am using a blue button as follows:

nav#main-navigation .menu > li:last-child a {
  background-color: #1dc6df;
  border-radius: 2px;
  padding: 10px 17px 12px !important;
  -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
}
nav .menu > li:last-child a:hover {
  background:#333;
  color: #fff !important;
}
nav .menu > li:last-child a > span.nav-line {
  opacity:0;
}

But when the button is selected the Nav Link current is the same color as the button.
How do I force the current nav link to stay white, only for the last link?