38441 comments found.
Hey Salient. How can have two different background colors in the same full width background row? I have nested rows now but since the content is restricted to contain, i don’t see a way to set that color to extend to the edge of the browser. Thanks again!!!
Hey brianlichty,
You can set a row BG color on an inner row, but there’s no built in option to also have that inner row extend the BG the full width of the page unless the parent row was set to full width content as the type.
Can you share the page URL or a screenshot showing what you’re trying to acheive so that I can help out?
Thanks in advance
Note that I am able to do this with some negative margin but it sort of throws the layout off a bit. For some reason the whole row gets taller.
Thanks brianlichty,
You’ll have to adjust this CSS to limit it to your specific row, but the gist of it could be achieved like so:
body .wpb_column .column-bg-overlay-wrap {
width: 50vw;
}
Cheers
hi! how disable image hover over products? to leave only the pop up image
Hey Nicko_217, could you let me know which product style you’re using or provide your URL in regards so I can assist?
Cheers
Minimal Design
Thanks Nicko_217,
.products li.product.minimal .background-color-expand {
display: none;
}
#ajax-content-wrap .products li.product.minimal .product-meta {
transform: none;
}
Hi—I can’t seem to figure out what the exact image size should be for my header images on blog posts so that the entire image shows and not be cut off. For instance I could upload an image header that’s 1200×500 and set the page header height settings to 500 and when the blog is published the header on the post will only show maybe 40% of the image’s height. Here’s a page a san example https://thefictionstoryroom.com/what-does-a-showrunner-do/
Can you advise what the issue is?
Hey JayCarver,
That’s because the height is set to 500px, but the width will change depending on your screen size. What you would need is a dynamic height adjustment or to constrain the image. Here are two different snippets which you can add one at a time to see which you like better:
1.
@media only screen and (min-width: 1000px) {
body[data-header-resize] #page-header-bg,
body[data-header-resize] #page-header-wrap {
min-height: 350px;
height: 90vh!important;
}
}
2.
body #page-header-bg .page-header-bg-image {
background-size: contain;
}
Cheers
Hello, I’m running v 11.0.4 and am having an issue I’m not having on a site running v 10.0.4 – my page transitions are’t updating when I make changes in the Salient page transitions panel.
My pages are currently fading to white with no .gif preloader, but in the salient panel I have the Page Transition BG Color set to #000000 and a custom loading image uploaded, and everything is saved.
Website: laosuxo.dakotabrinkert.com
Appreciate all the help!
Hey TheRooster,
Can you please start by disabling your caching/minification plugin to rule out that? Kindly let me know once you’ve done so.
Cheers
That was it! Thanks!
Glad I could help TheRooster 
Hi, how can I import the demo for business 3? Doesn’t appear on the Salient Demo Importer. Thank you.
Hey calvinseng,
Please make sure that you’ve updated your version of the Salient demo importer plugin to the latest release (1.1). If you’ve already done so, it’s possible that you have an outdated demo folder lingering in your salient theme directory at salient/nectar/redux-framework/extenstions/wbc_importer
If that directory exists, please delete it so that the Salient demo importer plugin can be loaded.
Cheers
ok, last question. Is is possible just to put a plain search field (like the side widget) in the header (instead of the icon and large search box?)
Hey brianlichty,
There is currently no built-in option for that. You would need to modify the salient/includes/partials/header/header-menu.php via a child theme in regards
thank you!!
You’re welcome brianlichty
Hi Salient Team again. I would like to put a search bar on a page without using a sidebar widget.
What is the best way to do that? To have a stand-alone search field that can be placed anywhere on a page? I was able to pull some code and it works, but if I try to wrap it within a row using a colored background, the background color is not contained to the row and instead colors the entire page. Can you help?
<div class="widget widget_search"><form role="search" method="get" class="search-form" action="https://www.myurl.com/">
<input type="text" class="search-field" placeholder="Search..." value="" name="s" title="Search for:">
<button type="submit" class="search-widget-btn"><span class="normal icon-salient-search" aria-hidden="true" /><span class="text">Search</span></button>
</form></div>
Hey brianlichty,
That code looks correct – can you kindly share the page URL in regards so I can take a look?
Thanks
My site is on my desktop server so I can’t share it. I have a Booking page with two tabs (Material option). Two questions:
1. How can I make the overall font/tab bigger?
2. I’ve looked through the comments on this but I can’t seem to get the links to the specific tabs working. I have a CTA on each page with two buttons (one to each tab on the Booking page). The booking page URL is /booking. Tab 1 is Tab ID 1584118598155-2 and Tab 2 is Tab ID 1584118598223-8. What links do I put in the CTA buttons? Nothing is working.
Thank you!
Hey mcmurphy17,
1. Add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
.tabbed >ul li a {
font-size: 22px;
}
2. Linking to a specific tab requires formatting the URL with the name of the tab itself like so:
http://themenectar.com/demo/salient-promo/tabbed-section/?tab=lightning
(lowercase and hyphens for spaces)
Hey Awesome Salient Team… when creating a Nectar blog shortcode, is it possible to offset the post? I am hoping to add three or so posts with shortcodes, but obviously want to display different posts. Thanks!
No worries, I got it! [ post_offset=”1”]
Hey brianlichty,
Glad you found it
Hey there, is there a way to insert a custom image to replace the hamburger icon to close the menu by inserting custom CSS? I have “Off Canvas Menu Style” “Slide Out From The Right Hover Triggered” activated. Thank you!
Hey reijerstevens,
add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
.slide-out-hover-icon-effect div {
opacity: 0;
}
.slide-out-hover-icon-effect:before {
background-image: url();
background-size: cover;
height: 30px;
width: 30px;
display: block;
position: absolute;
left: 0;
top: 0;
content: '';
}
Cheers
Thanks! But not exactly what I was looking for I would like to show the hamburger when not activated and a custom image when the menu is open/active. Many thanks in advance!
Hey reijerstevens, the CSS provided should only target the icon once the menu is open – can you share your URL in regards so I can see where you’re at with the modification?
Thanks
Sure, here you go: https://noorderlichtcafe.flywheelsites.com/
Thanks!
Thanks reijerstevens,
Also add in the following:
.slide-out-hover-icon-effect:before {
opacity: 0;
transition: opacity 0.3s ease;
}
#slide-out-widget-area.open + .slide-out-hover-icon-effect:before {
opacity: 1;
}
With your current setup, you’ll also need to have a BG of some sort in order to cover the menu icon for opening. Without doing that, a new event will be needed to add some sort of class name to the menu icon in order to hide it in that state
Thanks so much! Almost got it working like we want it. I see what you mean. Any suggestion how I can hide the hamburger when the menu is activated/opened. As we have the background set to transparent, the hamburger remains always visible. How can I add a class name to the menu icon?
Hey reijerstevens,
Unfortunately there is no class added to track the opening state on the header icon, since it’s usually hidden. This would require a custom javascript event to add a classname so that it could be targeted with CSS to hide it when hovering over
Thanks for your reply.. Any other idea how I can get this working?
Hey reijerstevens,
Unfortunately since Salient did not build the slide out hover option expecting a transparent BG color, there’s no event in place to handle this. Some custom coding would be required at this time if you do not wish to cover up the menu icon with the hover icon state in some fashion
Hi, thanks for your reply. I understand. Any idea how I can achieve this otherwise? Do you provide custom coding against payment?
Hey reijerstevens,
We’re currently not taking on customization gigs – however, I’m sure you could find someone at Envato studio in regards: https://studio.envato.com/explore/wordpress
Allright, thanks!
You’re welcome reijerstevens
Hi, I want my website to conformance with accessibility standards to ensure the content can be accessed by everyone. In the Accessibility Review https://achecker.ca/checker/index.php the website have the following issues. “Replace your i elements with em or strong”
Do you know how to repair this?
Hey HotMan,
Salient uses i tags for icons, which is common practice - Can you please share your URL in regards so I can take a look to see if it’s referring to those or actual text content where you have i tags?
Thanks in advance
hdisplaydesign.com
Thanks HotMan,
I just looked at your page source at can see that no i tags exist other than for icons – if you wanted to alter the markup, it would require editing the salient theme files in regards, unfortunately there’s no quick solution to automatically convert the various icon markup throughout the theme. However, I’ve noted to investigate this further
Absolute amazing theme. I wanted to suggest a feature. In the Salient Studio where you select a pre-made template, it would be very helpful if you could provide a means for all users of Salient to upload their custom templates for everybody to use – a global library of templates.
Thanks a lot jojocahill2712!
I’ve not that idea on the wishlist
Cheers
Excellent! Thanks much!
You’re welcome jojocahill2712
Hi,
Have a question about this coming update, will it have an option to disable the portfolio headers and let us build our own headers with a page builder?
Example, I wanna remove this “The Bike Venture STYLE IS EVERYTHING” http://themenectar.com/demo/salient-corporate/portfolio/the-bike-project/
And build my own with video Lightbox and buttons, just like we have the option to do for pages -> http://themenectar.com/demo/salient-corporate-2/
Thanks
Hey toolbox101, yes it will include the option to disable the default portfolio header
Cheers
Hello, the default featured image I’m using on my blog posts is a square, so its being cropped on the blog listing page which is a rectangle. Is it possible to change the aspect ratio? Would also like to disable the grow animation on hover if possible. I’m using the Masonry Blog No Sidebar and Classic Enhanced Style. Thanks!
Hey misteraven,
Altering the sizing on that post style would require modifying the “portfolio-thumb” size in the nectar_add_image_sizes function (salient/nectar/helpers/media). The function can also be copied into your child theme functions.php.
2. Add this into the custom CSS box in the Salient options panel > general settings > css/script related tab:
.post-area.masonry.classic_enhanced .post .post-featured-img img {
transform: none!important;
}
Cheers
Hi,
How to hide on mobile a row/section with background video? it does not work by checking the appropriate box. Do you have a CSS code for this?
Thanks
Hey RV73, you can remove background videos from display on mobile by option titled “Disable Video Backgrounds On Mobile Devices” in the Salient options > general settings > functionality. If that’s not working for you, please share the URL in regards
Cheers
Hey, it doesn’t work with a youtube video. In fact, I want to copy the section and adjust the size of the section for each screen.
Hey RV73,
WPBakery doesn’t offer the option to toggle the display of an entire row for specific devices, but does columns within a row. The next update is providing the option to define separate values for many elements for each viewport, so that might be exactly what you’re looking for. If you’d like to test the beta, please reach out via the contact form on my author page https://themeforest.net/user/themenectar
Ok, no problem! I want to test the Beta version, I send the message immediately. Thanks!
Cheers 
Thanks
I just responded in regards.
Cheers
I’m trying to change the size of the single “big bold” testimonial. I added this to the custom CSS but nothing is changing. Thanks in advance for the help!
.nectar_single_testimonial [data-style=”bold”] p { font-size: 20px!important; line-height: 30px!important; }
Hey pocketprep,
That testimonial style will inherit from the “Heading 2” typography. Changing it manually could be done with the following snippet:
#ajax-content-wrap .nectar_single_testimonial[data-style] p {
font-size: 20px;
line-height: 30px;
}
Cheers
That worked but it’s still big on mobile. How do I add custom css for that?
One more thing – All of my pages are regular scroll except my home page which uses Fullscreen Rows. I have a light header and dark header set and it’s good for all of the pages except the home page. When the home page loads, it shows the light header like I set but then finishes loading with the dark header. The dark header logo colors blend with the home page backgrounds.
Hey mcmurphy17,
That CSS should also affect the mobile styling – can you share your actual page URL so I can take a look why it is not and also see the home page?
Cheers
For the home page issue:
https://www.michellemurphydesigns.com/Hey mcmurphy17,
when you edit the parent row of the first section, please ensure that the “text color” is set to “light”
How do I simply center items in a row? I want to center a button and I’m not able to do that…
Hey shirani93, each column has the option for “Centered Content” which will center the button page builder element. If that’s not working for you, please share your URL in regards so I can take a look.
Thanks in advance
If it possible to style LeaFlet maps with code from this sources ?https://openmaptiles.org/styles/
THX
Or from CartoDb http://bl.ocks.org/Xatpy/raw/854297419bd7eb3421d0/
Hey dokk,
It would be possible through custom modding – the code relative to the leafleft map is located at salient/js/elements/nectar-leaflet-map.js
Cheers
Sorry for tons of questions. Looked up how to change CTA button and font sizes to smaller, but couldn’t find anything but these suggestions. Tried, but didn’t work.
#call-to-action .container a {
line-height: 5px!important;
padding: 10px 15px!important;
}
Same for the font size:
#call-to-action .container a {
font-size: 16px!important;
}
Hey atlantchiropractic,
Are you referring to the call to action page builder element or the global call to action bar, which is set from the theme options panel? Kindly share the relevant URL in regards.
Cheers
https://atlanthealthnyc.com/
Hey atlantchiropractic,
add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
body .row .nectar-cta h4 {
font-size: 16px;
}
Or you can simply adjust the value for the “Heading 4” in the Salient options panel > typography tab > general html elements
Cheers
hi! https://gastromallorca.net/jensen/ i need the footer menu to be centered on mobile, thanks.
Hey dimage!
I’m currently seeing that the footer menu is already centered: https://ibb.co/XxdT9Mq
Can you clarify what you’re trying to change about it
I mean one page below the other
Hey dimage,
add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
body #footer-outer[data-cols="1"] #footer-widgets .widget.widget_nav_menu li {
display: block;
text-align: center;
}
Cheers
thanks, but i only want it for mobile version
Hey dimage,
@media only screen and (max-width: 1000px) {
body #footer-outer[data-cols="1"] #footer-widgets .widget.widget_nav_menu li {
display: block;
text-align: center;
}
}
great thanks
Cheers dimage
