Okay
  Public Ticket #3560513
Salient Mega Menu Description Font
Closed

Comments

  • threeninemedia started the conversation

    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

  •  1,661
    Judith replied

    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. 


  • threeninemedia replied

    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

  •  1,661
    Judith replied

    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.

  •   threeninemedia replied privately
  •  1,661
    Judith replied

    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:

    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. 

  •  8,454
    Tahir replied

    Hey Again,

    Please view: 

     

    Thanks.


    ThemeNectar Support Team 

  • threeninemedia replied

    @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

  •  8,454
    Tahir replied

    Hey Again,

    You will have to adjust this field in here: 

    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.
    
    8407989914.png

    Thanks.


    ThemeNectar Support Team 

  • threeninemedia replied

    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

  •  1,661
    Judith replied

    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:

    .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. 


  • threeninemedia replied

    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

  •  8,454
    Tahir replied

    Hey Again,

    Try setting it to 345px height and check: 

    3770286459.png

    Thanks.


    ThemeNectar Support Team 

  • threeninemedia replied

    Got it, thanks! Will set it up manually! 


    Thank you for helping me!

  • threeninemedia replied

    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. 

    4504912299.png

    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.

    8225247011.png

    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!

  •  8,454
    Tahir replied

    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 

  • threeninemedia replied

    Hi Tahir,

    I plan to have it like this

    3380397401.png

    Background image for the left section (if it will be possible to edit What We Offer + description text).

    Thank you!

  •  8,454
    Tahir replied

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

    li#menu-item-1531 * {
        color: #fff !important;
    }

    Thanks


    ThemeNectar Support Team 

  • threeninemedia replied

    Thank you! 

    It worked and changed the font color to white:

    5126288651.png

    Is it possible to add a black color overlay over the image and align the text in the middle/center of the block?

  •  8,454
    Tahir replied

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

    li#menu-item-1531 a {
        top: 50%;
        position: relative;
        transform: translateY(-50%);
    }
    li#menu-item-1531:before {
        content: "";
        background: rgba(0,0,0,.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }

    Thanks


    ThemeNectar Support Team 

  • threeninemedia replied

    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?

    7709198479.png

    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



  •  8,454
    Tahir replied

    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

    7710907759.png

    Thanks.


    ThemeNectar Support Team 

  •  1,661
    Judith replied

    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.

  • threeninemedia replied

    Thank you so much for your help!

  •   threeninemedia replied privately
  •  1,661
    Judith replied

    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. 


  • threeninemedia replied

    Ok, thanks.