Okay
  Public Ticket #265096
Menu Button
Closed

Comments

  • Ricardo started the conversation
    August 15, 2014 at 7:55am

    Hey there!
    Nowadays, all the effort are focus on conversion rate. One of the best way to improve conversion rate on the website is creating a button inside menu (different style). 
    Here it's one exemple:
    http://www.dino.com.br/

    Is there a way for us to do the same inside Salient theme? Would be AWESOME!!

    If there's not a way, can you point me how to solve it?

  •  8,839
    Tahir replied
    August 15, 2014 at 4:29pm

    Hey!

    You could highlight a menu item with some custom css. Let us know .

    Thanks

    ThemeNectar Support Team 

  • Ricardo replied
    August 15, 2014 at 10:08pm

    Hey, Tahir, thanks

    But how do I do that? Do you have any custom css code that I can give a try?

    Can you help me, I'm not a programmer.

  •  8,839
    Tahir replied
    August 16, 2014 at 1:48pm

    Hey Again!

    You will have to change the menu-item-id as per your liking. Right click on the menu and Inspect Element to find the correct id. Add this into the Custom CSS box located in your Salient Options panel :

    body #header-outer.transparent header#top nav > ul > li#menu-item-4090 {
    background: #f00;
}


body #header-outer.transparent header#top nav > ul > li#menu-item-4090 >a {
    padding-bottom: 6px !important;
}

    Cheers

    ThemeNectar Support Team 

  • Ricardo replied
    August 18, 2014 at 4:44am

    Tahir,

    You are awesome! Thanks =)

    But when I scroll down the customized menu desapear (inside sticker menu)

    Is there a way for us to let the colorized menu inside sticker menu too?
    http://leadsite.com.br/

  •  8,839
    Tahir replied
    August 18, 2014 at 4:03pm

    Sure, Simply remove the .transparent from the css selector so the css is like this:

    body #header-outer header#top nav > ul > li#menu-item-4090 {
    background: #f00;
}

body #header-outer header#top nav > ul > li#menu-item-4090 >a {
    padding-bottom: 6px !important;
}

    Cheers

    ThemeNectar Support Team 

  • Kimberley replied
    September 10, 2014 at 12:14am

    Hi there,

    I just tried doing this on my site ( http://slyaletownplus.azurewebsites.net/ ), with no result.  I have added the following code to the custom CSS box.  Note that I appropriately changed out the menu-item id.

    body #header-outer.transparent header#top nav > ul > li#menu-item-171 {

    background: #f00;

    }

    body #header-outer.transparent header#top nav > ul > li#menu-item-171 >a {

    padding-bottom: 6px !important;

    }

    Any idea what gives?

  •  8,839
    Tahir replied
    September 10, 2014 at 5:35pm

    Hey Kimberly!

    I dont see and item with the 171 id, probably the reason why the css was not working. 

    Thanks

    ThemeNectar Support Team 

  • J'aime replied
    October 17, 2014 at 7:30pm

    Hey! I got this to work, thanks! But the button only appears in the top nav on desktop view, seems to be hidden when viewed on mobile. Any thoughts? Thank you!

  •  8,839
    Tahir replied
    October 18, 2014 at 7:26pm

    Hey J'aime!

    Could you please provide the site url so we can have a look. 

    Thanks

    ThemeNectar Support Team 

  • J'aime replied
    October 20, 2014 at 6:42pm

    The site is password protected, so I sent over the details in a private ticket (referencing this ticket #). Thank you!