Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Menu Button
New Landing › How can we help? › Themeforest Theme Support › Dante › Menu Button
- This topic has 17 replies, 4 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
February 20, 2014 at 6:56 pm #50619
Hi
I want the last menu link to appear as a button. Is there a way to apply the button class?
ThanksFebruary 21, 2014 at 6:34 pm #50972Hi,
Please share your website URL so i can suggest you easily .
Cheers!
With Best Regards
Swiftideas ThemesFebruary 23, 2014 at 6:06 pm #51150Thanks
http://www.forestnation.com“My FN” I want to display as a button.
February 23, 2014 at 6:13 pm #51151Hi,
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 ThemesFebruary 25, 2014 at 9:11 am #51493Ok, thanks for trying.
I’ll make do with the icons for now.
Thanks againFebruary 25, 2014 at 2:52 pm #51701Hi @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
February 25, 2014 at 3:50 pm #51733Thanks, that’s awesome!!
February 25, 2014 at 3:54 pm #51737Great! Glad I could help
– Kyle
February 25, 2014 at 9:55 pm #51837Hi Kyle,
It works, but also affects all the sub menu items.
Is there a tweak to prevent this?February 26, 2014 at 2:16 am #51862Give 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
February 26, 2014 at 9:06 am #51912Thanks Ed!
February 26, 2014 at 10:01 am #51944Great work . Thanks Ed!
February 26, 2014 at 4:59 pm #52149Perfect, Thanks a lot! ๐
February 26, 2014 at 5:08 pm #52154No problem
February 26, 2014 at 9:13 pm #52224one 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? -
Posted in: Dante
You must be logged in to reply to this topic.