Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1148836
    EasyMedia
    Participant

    Hi – I added a CTA button to my site main navigation menu that’s running X using the method I found in the forums here of placing the button shortcode inside the menu Navigation Label field. Everything looks good – except I can’t seem to raise the button to align with the rest of my menu items, and I want to remove the menu hover underline effect just for the button (I’d like to preserve it for the other menu items). Thanks in advance for the help!

    #1149169
    Prasant Rai
    Moderator

    Hello There,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    Thanks.

    #1151912
    EasyMedia
    Participant

    My URL is (staging site for now): http://17e.d77.myftpupload.com/

    I’m running the Renew stack. As you can see I have added a button to the menu, but it sags below the other menu items despite my amateur CSS attempts to align it. I’d also like to remove the underline hover effect for just that menu item so that it just has the button hover effect and not the menu underline hover effect (but just for that one menu item)

    Thanks!

    #1151927
    Joao
    Moderator

    Hi There,

    Please add the following code to Appereance Customizer Custom CSS

    .x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:last-child>a {
        margin-top: -11px;
    }

    Hope it helps

    Joao

    #1152505
    EasyMedia
    Participant

    Thanks, that fixed the button positioning! But how do I remove the “underline” hover effect for that one menu item?

    #1152645
    John Ezra
    Member

    Hi there,

    Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

    .x-navbar .desktop .x-nav > li#menu-item-103 > a:hover > span {
        box-shadow: none;
    }

    Hope this helps – thanks!

  • <script> jQuery(function($){ $("#no-reply-1148836 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>