Hi there, could you please advise on how to use different description fonts like on the Salient website? Larger description font on the left and a smaller one on the right. thank you!
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
body #slide-out-widget-area .menuwrapper li small, #header-outer .sf-menu li ul li a .item_desc, #slide-out-widget-area.fullscreen-split .off-canvas-menu-container li small, #slide-out-widget-area .off-canvas-menu-container .nectar-ext-menu-item .item_desc, .material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container .menu li small, #header-outer #mobile-menu ul ul > li > a .item_desc, .nectar-ext-menu-item .menu-item-desc, #slide-out-widget-area .inner .off-canvas-menu-container li a .item_desc {
font-family: Plus Jakarta Sans;
text-transform: none;
font-weight: 400;
font-size: 15px;
}
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
thank you for your response! I tried it but it changes the Description font in both areas (see screenshot attached). I would like to make it the same as on your website megamenu (WooCommerce > where the description on the left under WooCommerce has a larger font size and smaller in the next megamenu section (Product Layouts, AJAX Shopping Cart, etc).
@Tahir, thank you for the video! I watched it but, unfortunately, it does not cover how to set the Description Font differently as on the Salient Demo.
Menu Item Title Inherits Typography From
Specify the font settings that the menu item should inherit from. These settings are defined by you in the Salient options panel.
I know this option but it adjusts only the Title font size.
I want to adjust the description size and make it like on your website (screenshot attached) - a bigger description font for a Megamenu section on the left and smaller - for a section on the right, under the menu item title.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
.nectar-ext-menu-item span[class*="inherit-h"] + .menu-item-desc {
font-size: 23px;
}
body #header-outer #top nav .sf-menu ul li > a .item_desc {
font-size: 14px;
}
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Amazing! That's what I was looking for! Thank you so much for your help and patience!
Quick question about the gap between an image and the megamenu border (as shown on the screenshot attached) - is there any universal code to set so the image height will always adapt to the menu height? Or do I need to find the best image height and manually set it?
I have another question - about the left area with the image in MegaMenu (What We Offer).
I see an option to add a background image to this part of the menu so it will automatically align to the menu height.
But if I add a background image and not a Menu Item Image - in this case, the text inside the menu block does not align in the center and there is no color overlay.
Is there any way to use a background image (for automatic image height adjustment) and be able to add color overlay and center text in this block? Like it is possible with Menu Item Image. The advantage of using a background image instead of a Menu Item Image is that it automatically adjusts a background image height to the screen.
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):
Sure, 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):
Would you mind if I ask a question about video requirements - I would like to use a video on my homepage and self-host it. What are the recommendations on video format, size, etc so it won't affect the load speed much?
I know that it is possible to use also YouTube links (which would be better I think in terms of optimization) but this option does not have as much flexibility as self-hosted videos like Hide Controls, Autoplay, Loop Video, etc
Hi there, could you please advise on how to use different description fonts like on the Salient website? Larger description font on the left and a smaller one on the right.
thank you!
Attached files: description_font.jpg
Hi there,
Thanks for writing to us.
For the larger description and smaller description we don't have options to adjust them yet however you can use css to adjust these fonts.
If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hi Judith,
Thank you for your reply!
Could you please guide me with the CSS code and where to input it so I can set the same size as on the Salient website (screenshot attached)?
Thank you!
Attached files: description_font.jpg
Hi there,
Thanks for writing to us.
Please share your website URL so that we can provide css specific to your site.
I look forward to your response.
Hi there,
Thanks for writing back:
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hey Again,
Please view:
Thanks.
ThemeNectar Support Team
@Judith,
thank you for your response! I tried it but it changes the Description font in both areas (see screenshot attached). I would like to make it the same as on your website megamenu (WooCommerce > where the description on the left under WooCommerce has a larger font size and smaller in the next megamenu section (Product Layouts, AJAX Shopping Cart, etc).
@Tahir, thank you for the video! I watched it but, unfortunately, it does not cover how to set the Description Font differently as on the Salient Demo.
Attached files: megamen_1.jpg
salient_mega.jpg
Hey Again,
You will have to adjust this field in here:
Thanks.
ThemeNectar Support Team
Hi Tahir,
Thank you for your reply!
I know this option but it adjusts only the Title font size.
I want to adjust the description size and make it like on your website (screenshot attached) - a bigger description font for a Megamenu section on the left and smaller - for a section on the right, under the menu item title.
Do you happen to know how to do it?
Thank you!
Attached files: description_font.jpg
Hello there,
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Amazing! That's what I was looking for! Thank you so much for your help and patience!
Quick question about the gap between an image and the megamenu border (as shown on the screenshot attached) - is there any universal code to set so the image height will always adapt to the menu height? Or do I need to find the best image height and manually set it?
Thank you!
Attached files: gap.jpg
Hey Again,
Try setting it to 345px height and check:
Thanks.
ThemeNectar Support Team
Got it, thanks! Will set it up manually!
Thank you for helping me!
Hi there,
I have another question - about the left area with the image in MegaMenu (What We Offer).
I see an option to add a background image to this part of the menu so it will automatically align to the menu height.
But if I add a background image and not a Menu Item Image - in this case, the text inside the menu block does not align in the center and there is no color overlay.
Is there any way to use a background image (for automatic image height adjustment) and be able to add color overlay and center text in this block? Like it is possible with Menu Item Image. The advantage of using a background image instead of a Menu Item Image is that it automatically adjusts a background image height to the screen.
Thank you!
Hey Again,
Try adjusting the Mega menu as you want and let us know so we can adjust the background using Custom CSS.
Thanks.
ThemeNectar Support Team
Hi Tahir,
I plan to have it like this
Background image for the left section (if it will be possible to edit What We Offer + description text).
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):
Thanks
ThemeNectar Support Team
Thank you!
It worked and changed the font color to white:
Is it possible to add a black color overlay over the image and align the text in the middle/center of the block?
Sure, 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):
Thanks
ThemeNectar Support Team
Amazing! Thank you so much!!
Would you mind if I ask a question about video requirements - I would like to use a video on my homepage and self-host it. What are the recommendations on video format, size, etc so it won't affect the load speed much?
I know that it is possible to use also YouTube links (which would be better I think in terms of optimization) but this option does not have as much flexibility as self-hosted videos like Hide Controls, Autoplay, Loop Video, etc
Hey Again,
- Only Self Hosted Videos will play on Mobile.
- Make sure they are in 16:9 ratio for the mobile to render them correctly.
- Convert the videos and then add them as per their appropriate file format: http://themenectar.com/docs/salient/page-builder-row/#video-background .
- Be sure to turn off this option in Salient Theme Options Panel -> General Settings -> Functionality Tab
Thanks.
ThemeNectar Support Team
Hello there,
We're glad this works for you.
Please refer to this article for more information on video requirements: https://themenectar.ticksy.com/article/9066/
Please feel free to open a new ticket in case of any other queries.
Thank you so much for your help!
Hi there,
Thanks for writing back.
Please refer to this guide to help determine what's possible with the available features: http://themenectar.com/docs/salient/salient-menu-options/
If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Ok, thanks.