New to the community? Start here

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.

Mon, 26 Jun 2017 4:09:02
More WPMU DEV Dashboard discussions
WPMU DEV Dashboard
  • Katya Tsihotska
    • Ex Staff

    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 :slight_smile: 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

    [attachments are only viewable by logged-in members]

    However, we also can try to help you :slight_smile: 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://wpmudev.com/docs/getting-started/getting-support/#chapter-4

    Kind regards,

    Katya

  • Dion Kara
    • Flash Drive

    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
    • Ex Staff

    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)?

    [attachments are only viewable by logged-in members]

    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.

    [attachments are only viewable by logged-in members]

    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
    • Ex Staff

    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

  • Ash
    • Code Norris

    Hello Dion Kara

    How do I change the top padding on the social icons? How do I make the menu and social icons appear the same before I scroll?

    What do you mean by appear the same? Do you want to put the social icons vertically in between logo and menus? If possible please post a screenshot marking that area.

    Have a nice day!

    Cheers,

    Ash