Hi ! I have a question. Would it be possible to have a nice background image/texture/pattern for the top header, the main header (menu navigation) and the footer where the widgets are? What is the perfect size to create the background image in pixels and how do I code it? Thank you!
You can use any bcackground patterns available one site is http://subtlepatterns.com/ . You will then have to add them via css. Please provide us link of the pattern when you have uploaded them on your server and i will write up some custom css for it.
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):
body #header-outer.transparent {
background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg);
background-size: cover;
background-repeat: no-repeat;
}
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):
body #header-outer:not(.transparent) {
background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Is it possible to add a small image, like a small certificate to show in the header? But should only be visible on computer devices, not in the Off canvas menu? :)
Right now, i have used the "Text To Display In Header" function in the salient menu, but it will also be appeared in the off canvas. But then i try to remove it with CSS-code in the "Text To Display In Header-setting" it will not be removed. I use this code:
Thanks for your respons, and I'm sorry for the misplacing reply, my though was it maybe could be related to the same main topic in this ticket. I will remember it for next time.
But yes i have though about Global sections. But i want to avoid the header navigation section, to be bigger than the original size (if that make sense) - I just want the image to fade in line to all the other elements in the header. Just like when i use "Text To Display In Header" function :)
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):
Hi ! I have a question. Would it be possible to have a nice background image/texture/pattern for the top header, the main header (menu navigation) and the footer where the widgets are? What is the perfect size to create the background image in pixels and how do I code it? Thank you!
Hi Tahir, just to clarify, the look i want to go for is this: https://www.dropbox.com/s/p3nkuyveocialqk/Screensh...
like creative market place!
Hey Suzana!
You can use any bcackground patterns available one site is http://subtlepatterns.com/ . You will then have to add them via css. Please provide us link of the pattern when you have uploaded them on your server and i will write up some custom css for it.
Cheers
ThemeNectar Support Team
HI Tahir!
I would like to use this pattern called 'lighter' for the main menu: http://suskadesign.com/gb/wp-content/uploads/bg/li...
and I would like to use this pattern called darker for the top menu: http://suskadesign.com/gb/wp-content/uploads/bg/da...
Thank you so much! I love the pattern website you sent me :)
Hey Suzana!
Add this into the Custom CSS box located in your Salient Options panel Or on the Visual Composer Css button so the css shows on that page only:
body #header-secondary-outer { background: url(http://suskadesign.com/gb/wp-content/uploads/bg/darker.png); } body #header-outer { background: url(http://suskadesign.com/gb/wp-content/uploads/bg/lighter.png); }
Cheers
ThemeNectar Support Team
Hi Tahir
This works well but is there a way to make it responsive? I tried width: 100% ...
Many thanks
Pete
@Pete, Not sure i understand. Could you provide the page url ?.
ThemeNectar Support Team
Just wondering if the background image could be made to resize with the container width, for different browser widths
http://floorwise.2hdev.co.uk/ pass 2hdev
The container width is set to max of 1425, the image is 1200 wide.
Thanks!
Pete
Hey Again,
Try using the cover method.
body #header-outer { background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg); background-size: cover; background-repeat: no-repeat; }Thanks
ThemeNectar Support Team
That works well - thank you!
Great solution Tahir!
What if I wanted to only do this for non-transparent headers?
That is, on pages on which I've enabled "Force Transparency On Navigation" the image does not appear.
Is this possible?
Hey Again,
Sure,
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):
body #header-outer.transparent { background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg); background-size: cover; background-repeat: no-repeat; }Thanks
ThemeNectar Support Team
Sorry, I wasn't clear.
I would like to use the background image in the header by default,
but NOT use it when the page is set to transparent.
Thanks
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):
body #header-outer:not(.transparent) { background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg); background-size: cover; background-repeat: no-repeat; }Thanks
ThemeNectar Support Team
That worked!
You are the man Tahir!!!
Is there an easier way to do this yet?
Hi There,
We do not yet have a feature to add image to the header except through css, however this is being looked into and once it is out we will let you know.
Thanks.
Is it possible to add a small image, like a small certificate to show in the header? But should only be visible on computer devices, not in the Off canvas menu? :)
Right now, i have used the "Text To Display In Header" function in the salient menu, but it will also be appeared in the off canvas. But then i try to remove it with CSS-code in the "Text To Display In Header-setting" it will not be removed.
I use this code:
@media (max-width: 980px) {
.nectar-header-text-content {
display: none;
}}
Does i do something wrong? or is it not possible? :)
Hi there,
Thank you for reaching out to us.
For any new queries, we recommend opening a new ticket whenever you have a new query, to avoid any confusion.
That said, have you tried using global sections to add this to your header? You can read about global sections in our guide https://themenectar.com/docs/salient/page-builder-global-sections/
I hope that helps.
Regards,
Hi Andrew,
Thanks for your respons, and I'm sorry for the misplacing reply, my though was it maybe could be related to the same main topic in this ticket. I will remember it for next time.
But yes i have though about Global sections. But i want to avoid the header navigation section, to be bigger than the original size (if that make sense) - I just want the image to fade in line to all the other elements in the header.
Just like when i use "Text To Display In Header" function :)
Hey Again,
You can remove the Text using CSS in the Off Canvas Menu as well. Let us know the page url so we can check why its not working for you.
Thanks
ThemeNectar Support Team
Hi Tahir,
URL: https://www.econet.dk/
Thank you
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):
.nectar-header-text-content.mobile-only { display: none !important; }Thanks
ThemeNectar Support Team
It worked so well! And your description make sense. Thank you Tahir.
And sorry for the misplacing comment. I just make a new ticket next time :)
Have a great day