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

Comments

  • tostevincharlie started the conversation
    February 9, 2021 at 3:03pm

    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,848
    Tahir replied
    February 9, 2021 at 3:20pm

    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
    February 9, 2021 at 4:25pm

    Hi Tahir,


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


    Thanks

  •  8,848
    Tahir replied
    February 9, 2021 at 5:28pm

    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
    February 9, 2021 at 6:56pm

    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,848
    Tahir replied
    February 10, 2021 at 3:49pm

    Hey Again,

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

    Thanks 

    ThemeNectar Support Team