Home Forums WoodMart – Premium Template To small icons on shop page category selector and on the menu bar

This topic contains 9 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 week, 5 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #268212

    JanDaDa
    Customer

    Hi,

    My Icons apears to small on both the menu bar as the shop page top bar. Is there a way to solve this? I have read on the forum to add widht/height to the SVC file but it doesnt work with me.

    Can you maybe adjust the below code. If needed you may adjust for both the menu bar and main nav.

    Topic 1
    Topic 2

    Thanks in advance.

    Example SVG Code which can be used as an exmple:
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1,.cls-2{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:6px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M233.33,141.22,129.52,245.4a12.39,12.39,0,0,1-17.52-.18L56.88,190.29a12.39,12.39,0,0,1-.25-17.51L160.44,68.6a12.13,12.13,0,0,1,10.21-3.43l48.52,6.44a12.79,12.79,0,0,1,10.94,10.9L236.72,131A12.15,12.15,0,0,1,233.33,141.22Z"/><circle class="cls-1" cx="195.1" cy="106.96" r="14.3"/><path class="cls-2" d="M212,69.78C226,55.66,241.09,47.84,245.59,52.33S242.33,71.9,228.25,86,199.12,108,194.62,103.49"/></svg>

    #268240

    Hello,

    Please provide your site admin access to the private area.

    Best Regards

    #268327

    JanDaDa
    Customer

    Provided in private content. Thank you!

    Private Content Hidden
    #268413

    Hello,

    I have checked the SVG and I do not see the width and height in the code.

    You need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ attributes to your <svg> tag like it is shown: http://prntscr.com/m4n0qw Set the width and height as per your needs, I give just a sample.
    Then you will need to re-upload your icons in WordPress Dashboard.

    Best Regards

    #268455

    JanDaDa
    Customer

    Hi Elise,

    Thanks for your answer. I have modified the code as you said but it doesnt solve my issue for both menu as shop page. Can you take a look again?

    Start code:
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1,.cls-2{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:6px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M233.33,141.22,129.52,245.4a12.39,12.39,0,0,1-17.52-.18L56.88,190.29a12.39,12.39,0,0,1-.25-17.51L160.44,68.6a12.13,12.13,0,0,1,10.21-3.43l48.52,6.44a12.79,12.79,0,0,1,10.94,10.9L236.72,131A12.15,12.15,0,0,1,233.33,141.22Z"/><circle class="cls-1" cx="195.1" cy="106.96" r="14.3"/><path class="cls-2" d="M212,69.78C226,55.66,241.09,47.84,245.59,52.33S242.33,71.9,228.25,86,199.12,108,194.62,103.49"/></svg>

    Modified to:
    <svg width="31" height="40" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1,.cls-2{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:6px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M233.33,141.22,129.52,245.4a12.39,12.39,0,0,1-17.52-.18L56.88,190.29a12.39,12.39,0,0,1-.25-17.51L160.44,68.6a12.13,12.13,0,0,1,10.21-3.43l48.52,6.44a12.79,12.79,0,0,1,10.94,10.9L236.72,131A12.15,12.15,0,0,1,233.33,141.22Z"/><circle class="cls-1" cx="195.1" cy="106.96" r="14.3"/><path class="cls-2" d="M212,69.78C226,55.66,241.09,47.84,245.59,52.33S242.33,71.9,228.25,86,199.12,108,194.62,103.49"/></svg>

    #268456

    JanDaDa
    Customer

    I took a look into the Google Dev tools en there seems to be a max height of 18px (Stylesheet). If I turn it off manualy it resolves my issue (see attachment).

    How can this be resolved so its automatically the upload size?

    Attachments:
    You must be logged in to view attached files.
    #268626

    Hello,

    This style changes depending on the SVG height. It is max-width:40px on our demo: https://prnt.sc/104o7lx

    I am checking your site it is 30px now: https://prnt.sc/104o8ji

    Please try to increase the SVG size.

    Best Regards

    #268688

    JanDaDa
    Customer

    Hi,

    Thnx for the reply. I changed the svg size as requested. The problem is with the max width. My icons are large enough (Set: 31width and 40height as you said).

    If the max is set to 40 the issue will be solved. How can this be changed? Setting the width/height higher doesn’t change de max height settings.

    Strange by the way that we need to set the svg size manually. Its commonly done using proper css. One of the key advantages of using SVG formats.

    Looking forwards for a solution.

    #268834

    JanDaDa
    Customer

    Hi all,

    I figured it out myself: Dont take the time to manually adjust the width/height but just upload the icons and paste the following custom CSS in the theme editor (or your child theme).

    .woodmart-navigation .category-icon {
        max-height: 40px !important;
    } 
    
    .category-nav-link .category-icon {
    		height: 40px !important;
    	max-height: 40px !important;}

    The first part of the code adjust the max icon height on the main nav. The second one changes the size on the shop page. The issue was because there was a max height error in the theme. Using the !important overrides the default settings.

    Regards,

    #269038

    Hello,

    We are glad you have solved the issue.

    If you have any questions please feel free to contact us.
    Best Regards

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.