Are you able to help me with customising salient theme?

Are you able to help me with customising salient theme? I am having a few issues trying to get my website to display correctly.

    Katya Tsihotska

    Hi Dion Kara

    Hope you are doing well today.

    It would be best to ask Salient theme support team for this as they will be a lot more familiar with their own product If you've bought the theme on ThemeForest, one of the ways to do it is to go here:
    https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
    And press Get Support button

    However, we also can try to help you Could you please describe with more details what exactly issues you have? Could you also grant us temporary support access to your website so we can have a better look at your site? You can grant us access via WPMUDEV Dashboard plugin, there's no need to share credentials. Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Kind regards,
    Katya

    Dion Kara

    Hi,

    Thank you so much for your reply. The main issues I am having are:
    1. How do I re-position the social media icons to be between the header logo on scroll and the menu.
    2. How do I make the Logo disappear on scroll?
    3. I had this code in my CSS to customise the position of the nectar slider captions and it no longer works. What do I need to change?

    @media only screen and (max-width : 2000px) and (min-width : 1800px) {
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 25px!important;
            line-height: 27px!important;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p span {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .button a {
            font-size: 16px!important;
            padding: 15px 15px !important;
            border: 2px solid #AEA2B0;
            border-radius: 5px 5px 5px 5px !important;
        }
    
        body #ajax-content-wrap .nectar-slider-wrap .swiper-slide .content {
            margin-top: 250px !important;
            margin-left: -80px !important;
            top: 30px !important;
        }
    }
    
    @media only screen and (max-width : 1799px) and (min-width : 1200px) {
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 25px!important;
            line-height: 27px!important;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }
    
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p span {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .button a {
            font-size: 16px!important;
            padding: 15px 15px !important;
            border: 2px solid #AEA2B0;
            border-radius: 5px 5px 5px 5px !important;
        }
    
        body #ajax-content-wrap .nectar-slider-wrap .swiper-slide .content {
            margin-top: 10px !important;
            margin-left: -140px !important;
            top: 30px !important;
        }
    }
    
    @media only screen and (max-width : 1199px) and (min-width : 400px){
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 20px!important;
            line-height: 22px!important;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }
    
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p span {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .button a {
            font-size: 15px!important;
            padding: 2px 7px !important;
        }
    
        body #ajax-content-wrap .nectar-slider-wrap .swiper-slide .content {
            margin-top: 14px !important;
            top: 30px !important;
            font-style: bold; !important;
            padding: 10px 10px !important;
            border: 2px solid #AEA2B0;
            border-radius: 5px 5px 5px 5px !important;
        }
    }
    

    Thanks in advance.
    Dion

    Katya Tsihotska

    Hi Dion Kara

    Hope you had a great day!

    1. It is not possible in this theme out of the box. You can do it only using custom CSS, I prepared some CSS for you, but you may need set some margins and alignment to your taste. Please, paste this CSS into WordPress Dashboard > Appearance > Customize > Additional CSS. I also can't guarantee that this code will work 100% correctly, as I'm not advanced user of this theme

    #header-outer[data-format="centered-menu"].small-nav header#top .span_9 {
        width: 74.5%;
    }
    body.ascend #header-outer[data-full-width="true"].small-nav header#top nav >ul.buttons {
        position: static;
        float: left;
    }
    #header-outer[data-format="centered-menu"].small-nav header#top .span_9 .sf-menu {
        float: right;
        width: auto;
    }

    2. Which logo did you mean (1) or (2)?

    3. I'm not sure how this code should work, so I can't fully test. But I've found that the block with id ajax-content-wrap is empty on all pages.

    So, I suggest you try to remove this id from your CSS selectors. Should be something like this in result:

    @media only screen and (max-width : 2000px) and (min-width : 1800px) {
        body .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 25px!important;
            line-height: 27px!important;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }
        body .nectar-slider-wrap div.swiper-slide .content p span {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body .nectar-slider-wrap div.swiper-slide .content p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body .nectar-slider-wrap div.swiper-slide .button a {
            font-size: 16px!important;
            padding: 15px 15px !important;
            border: 2px solid #AEA2B0;
            border-radius: 5px 5px 5px 5px !important;
        }
    
        body .nectar-slider-wrap .swiper-slide .content {
            margin-top: 250px !important;
            margin-left: -80px !important;
            top: 30px !important;
        }
    }
    
    @media only screen and (max-width : 1799px) and (min-width : 1200px) {
        body .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 25px!important;
            line-height: 27px!important;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }
    
        body .nectar-slider-wrap div.swiper-slide .content p span {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body .nectar-slider-wrap div.swiper-slide .content p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body .nectar-slider-wrap div.swiper-slide .button a {
            font-size: 16px!important;
            padding: 15px 15px !important;
            border: 2px solid #AEA2B0;
            border-radius: 5px 5px 5px 5px !important;
        }
    
        body .nectar-slider-wrap .swiper-slide .content {
            margin-top: 10px !important;
            margin-left: -140px !important;
            top: 30px !important;
        }
    }
    
    @media only screen and (max-width : 1199px) and (min-width : 400px){
        body .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 20px!important;
            line-height: 22px!important;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }
    
        body .nectar-slider-wrap div.swiper-slide .content p span {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body .nectar-slider-wrap div.swiper-slide .content p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding-bottom: 7px;
        }
        body .nectar-slider-wrap div.swiper-slide .button a {
            font-size: 15px!important;
            padding: 2px 7px !important;
        }
    
        body .nectar-slider-wrap .swiper-slide .content {
            margin-top: 14px !important;
            top: 30px !important;
            font-style: bold; !important;
            padding: 10px 10px !important;
            border: 2px solid #AEA2B0;
            border-radius: 5px 5px 5px 5px !important;
        }
    }

    If you have any additional questions please let me know and I’ll be happy to help.

    Kind regards,
    Katya

    Katya Tsihotska

    Hi Dion Kara

    Hope you are doing fine today.

    I've mistakenly marked your thread as resolved, I'm sorry for that.

    1. Where did you enter this code? I've pasted it into Appearance > Customize > Additional CSS (as I mention in my previous reply) and it works fine, please, check.

    2. I've also added the following code in the same place to make the logo disappear on scroll:

    div#header-outer.small-nav+#mobile-menu+#ajax-loading-screen+#ajax-content-wrap+.row .logotin {
        display: none;
    }

    Let me know if you need further assistance.

    Kind regards,
    Katya