Okay
  Public Ticket #2686304
Add a button to sticky sub-menu
Closed

Comments

  • tostevincharlie started the conversation

    Hi,

    I hope you can help. I would like to change the colour of the sub-menu link 'Take the consultation' to red and also see a css option to change the styling of it so that it looks like it's a button with the default arrow please. It would also be great if i could align this text left inline with the copy in the main header above.


    Also as you scroll down and hit the vertical sticky tabs section the tabs slightly fall behind the sub-menu. Is there a way to push this content down a little so it doesn't get cut-off?

    http://iap.oi-you.io/

    Thanks

    Charlie

  •  8,342
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .page-submenu[data-alignment="left"] .full-width-section ul li:first-child {
        background: #b60011;
        padding: 0 40px;
        position: relative;
        color: #fff !important;
        border-radius: 4px!important;
        -webkit-border-radius: 4px!important;
        margin: 5px;
        font-family: 'Open Sans';
        font-weight: 600;
        -webkit-transition: opacity .45s cubic-bezier(0.25, 1, 0.33, 1), transform .45s cubic-bezier(0.25, 1, 0.33, 1), border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1), box-shadow .45s cubic-bezier(0.25, 1, 0.33, 1);
        transition: opacity .45s cubic-bezier(0.25, 1, 0.33, 1), transform .45s cubic-bezier(0.25, 1, 0.33, 1), border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1), box-shadow .45s cubic-bezier(0.25, 1, 0.33, 1);
    }
    .page-submenu[data-alignment="left"] .full-width-section ul li:first-child:hover {
        opacity: 0.87;
    }
    .page-submenu[data-alignment="left"] .full-width-section ul li:first-child a:after {
        font-family: 'icomoon';
        padding: 14px;
        font-size: 18px;
        content: "\e909";
        position: relative;
        top: 3px;
    }
    body .page-submenu li a {
        opacity: 1;
    }

    Thanks


    ThemeNectar Support Team 

  • tostevincharlie replied

    Hi Tahir,


    Sorry that didn't work unfortuately. Styling is as preset.


    Thanks

  •  8,342
    Tahir replied

    Hey Again,

    Use this revised CSS: 

    6352239392.pngClick To Open Larger Image.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .page-submenu .full-width-content ul li:last-child{
        background: #b60011;
        padding: 0 40px;
        position: relative;
        color: #fff !important;
        border-radius: 4px!important;
        -webkit-border-radius: 4px!important;
        margin: 5px;
        font-family: 'Open Sans';
        font-weight: 600;
        -webkit-transition: opacity .45s cubic-bezier(0.25, 1, 0.33, 1), transform .45s cubic-bezier(0.25, 1, 0.33, 1), border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1), box-shadow .45s cubic-bezier(0.25, 1, 0.33, 1);
        transition: opacity .45s cubic-bezier(0.25, 1, 0.33, 1), transform .45s cubic-bezier(0.25, 1, 0.33, 1), border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1), box-shadow .45s cubic-bezier(0.25, 1, 0.33, 1);
    }
    .page-submenu .full-width-content ul li:last-child:hover {
        opacity: 0.87;
    }
    .page-submenu  .full-width-content ul li:last-child a:after {
        font-family: 'icomoon';
        padding: 14px;
        font-size: 18px;
        content: "\e909";
        position: relative;
        top: 3px;
    }
    body .page-submenu li a {
        opacity: 1;
    }

    Thanks



    ThemeNectar Support Team 

  • tostevincharlie replied

    Thanks for digging Tahir and that worked but it was too limiting in editing capabilities so went with a simple button in the primary navigation instead.

    As for my previous question regarding the vertical sticky tabs section - Is there a way to have the tabs sit a little further down the page? At the minute they go quite close to the nav bar. Preferable positioning attached...

  •  8,342
    Tahir replied

    Hey Again,

    I am afraid its not possible with css as there is no extra class added when its sticky.

    Thanks 


    ThemeNectar Support Team