Can you please look at the url I attached that links to one of your demo pages, an tell me how you got that polygon bird png to sit on top of the Slider. I am trying to get my logo (has to be png image) to sit on a full-width/ full-screen slider with bottom arrow for my homepage.
Hello! I've done what you recommended: created a row, placed a single image element of a png file then in the same row added a nectar slider. All that shows up is the nectar slider though no image on top. Is that the correct path to achieve this effect? Any idea why that didn't work for me?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.swiper-slide .content p img {
max-width: 45% !important;
}
}
Okay nevermind, for some reason it worked for like 2 seconds, I refreshed and then it didn't work again. Could you check it out? Your code is in there now
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content {
max-width: 45vw !important;
}
}
As mentioned previously the screenshot shows that the image is still taking up the same amount of space as it was in the beginning. (half of the screen). I need it to be smaller than that and it does not seem to be shrinking with the mobile screen. The image on top stays the same size no matter what size the screen is
Please create a new ticket with your login credentials so i can take a look. The Css is working perfectly on my end in Chrome Browser. Could you try viewing it in Browser Incognito Mode ?.
Can you please look at the url I attached that links to one of your demo pages, an tell me how you got that polygon bird png to sit on top of the Slider. I am trying to get my logo (has to be png image) to sit on a full-width/ full-screen slider with bottom arrow for my homepage.
Hey Micah!
You will have to use a row and place an image element inside it with your logo. Then use the nectar slider element of the page builder below it.
Cheers
Salient Support Team
I'm also after the same thing. How would I go about adding a row to do this?
Thanks.
John
Sorry, i've managed to do what I needed to using your demo files. Thanks :)
Hello! I've done what you recommended: created a row, placed a single image element of a png file then in the same row added a nectar slider. All that shows up is the nectar slider though no image on top. Is that the correct path to achieve this effect? Any idea why that didn't work for me?
Hey Kevin!
To add the bird simply add the image as an html img like this:
Also see screenshot for ref: http://prntscr.com/47mz67 .
Cheers
Salient Support Team
Hi Tahir
How would you adjust the size of the image you are placing on top of the nectar slider? In mobile the image pretty much takes up the whole slide.
@Victoria . You will have to set a max-width on mobile using css. Let us know the page url .
Best
Salient Support Team
https://owa.co.za/home-basic-2/
I am referring to the little blocks in mobile - they take up quite alot of space specifically in mobile view so would like them smaller here.
Thanks
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) { .swiper-slide .content p img { max-width: 45% !important; } }Thanks
Salient Support Team
Hi Tahir
I placed this into the CSS box but it doesn't seem to be working.
No worries I used this code and it seems to have worked
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content {
max-width: 45% !important;
}
}
Okay nevermind, for some reason it worked for like 2 seconds, I refreshed and then it didn't work again. Could you check it out? Your code is in there now
Hey Again,
Seems to be working alright: http://prntscr.com/q00xds .
Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ and for WP Rocket use this guide : https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css m.
Best
Salient Support Team
Hi Tahir
I am wanting it to shrink smaller with mobile view. Currently, and in your screenshot the image is staying the same size?
Hey Again,
Try using the Viewport Width unit.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) { .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content { max-width: 45vw !important; } }Thanks
Salient Support Team
Is this working for you? As it isn't working for me still? Thanks
Yes its working fine as in the screenshot .
Best
Salient Support Team
Hi Tahir
As mentioned previously the screenshot shows that the image is still taking up the same amount of space as it was in the beginning. (half of the screen). I need it to be smaller than that and it does not seem to be shrinking with the mobile screen. The image on top stays the same size no matter what size the screen is
Please create a new ticket with your login credentials so i can take a look. The Css is working perfectly on my end in Chrome Browser. Could you try viewing it in Browser Incognito Mode ?.
Best
Salient Support Team