Hallo, First question How I can change this mobile menu icon like in the screenshot? 2- when I cli

This topic has 10 replies, 2 voices, and was last updated 1 months, 4 weeks ago ago by Tony Rodriguez

  • Avatar: Armia
    Armia
    Participant
    January 29, 2025 at 00:11

    Hallo,

    First question How I can change this mobile menu icon like in the screenshot?

    2- when I click on the video category is not open, how I can change it? So like when someone click on any category than open an independent page.

    Please look to the screenshot.
    Many thanks.

    Files is visible for topic creator and
    support staff only.
    9 Answers
    Avatar: Armia
    Armia
    Participant
    January 29, 2025 at 00:19

    Hallo,

    First question How I can change this mobile menu icon like in the screenshot?

    2- when I click on the video category is not open, how I can change it? So like when someone click on any category than open an independent page.

    Please look to the screenshot.
    Many thanks.

    Files is visible for topic creator and
    support staff only.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 29, 2025 at 06:57

    Hello, @Armia,

    Thank you for contacting us and for using XStore.

    Please, check our answer for the same request you have -> https://www.8theme.com/topic/shop-page-is-not-clickable-from-mobile-menu/#post-396536

    We hope this helps.

    Please do not hesitate to contact us if you have any further questions or require additional assistance.

    Best Regards,
    The 8Theme Team

    Avatar: Armia
    Armia
    Participant
    January 29, 2025 at 08:35

    Hallo,

    But this is not my question!!

    My question is how I can change mobile menu arrow icon and enlarge it? See the screenshot please.

    Files is visible for topic creator and
    support staff only.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 29, 2025 at 09:37

    Hello, @Armia,

    Thank you for your response.

    You can change the SVG icon using CSS by replacing its content with a new SVG using the background-image property. Please try to add next custom CSS code in XStore > Theme Options > Theme Custom CSS > Global CSS.

    @media (max-width: 767px) {
      .etheme-elementor-nav-menu-item-icon svg {
        width: 0; 
        height: 0; 
        visibility: hidden;
      }
    
      .etheme-elementor-nav-menu-item-icon {
        display: inline-block;
        width: 24px; /* Adjust as needed */
        height: 24px; /* Adjust as needed */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32' fill='%23ff0000'%3E%3Cpath d='M16 2l4 12h12l-10 7 4 12-10-7-10 7 4-12-10-7h12z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    Add a new SVG as a background:

    background-image: url(…) replaces the original icon with a new one.
    The new SVG is encoded in URL-encoded format so it can be used directly in CSS.
    You can change the fill=’%23ff0000′ (#ff0000 red color) to any other color.

    We hope this helps. Should you require any further assistance, please do not hesitate to reach out. We are here to help you.

    Best Regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    Avatar: Armia
    Armia
    Participant
    January 30, 2025 at 22:21

    Oké thanks.

    How I can to change shop page breadcrumbs background color please?

    Files is visible for topic creator and
    support staff only.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    January 31, 2025 at 06:08

    Hello, @Armia,

    Thank you for your response.

    To make the necessary changes, please follow the steps below:
    1. Navigate to **XStore Builders** > **Product Archive Builder**.
    2. Select **Edit Archive Template**.
    3. Proceed to **Edit Section** > **Style**.
    4. Adjust the color settings according to your requirements and save the updates.

    For your reference, we have provided images in the private content area to assist you further.

    Should you have any questions or need additional support, please feel free to reach out.

    Best regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    Avatar: Armia
    Armia
    Participant
    February 1, 2025 at 23:18

    Oké thank you.
    But I stil dont know how to change the size and the icon and icon color?
    I want same icon but I want change color and size please?

    @media (max-width: 767px) {
    .etheme-elementor-nav-menu-item-icon svg {
    width: 0;
    height: 0;
    visibility: hidden;
    }

    .etheme-elementor-nav-menu-item-icon {
    display: inline-block;
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
    background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’1em’ height=’1em’ viewBox=’0 0 32 32′ fill=’%23ff0000’%3E%3Cpath d=’M16 2l4 12h12l-10 7 4 12-10-7-10 7 4-12-10-7h12z’/%3E%3C/svg%3E”);
    background-size: contain;
    background-repeat: no-repeat;
    }
    }

    Avatar: Armia
    Armia
    Participant
    February 1, 2025 at 23:37

    Actually I want The mobile menu look like this please see the photos.

    And I want to put images with the Categories in menu like in the photos I sent you!

    Every time I put photo for menu categories will be like the photo number 1 .but it’s not good because look big also same if i add small icon i see same very big.

    Files is visible for topic creator and
    support staff only.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    February 3, 2025 at 06:49

    Hello, @Armia,

    Thank you for your response.

    1/ If you wish to same icon but you want to change color and size, Please add next custom CSS code in XStore > Theme Options > Theme Custom CSS > Global CSS

    .etheme-elementor-nav-menu-item-icon svg {
        fill: red !important;
        font-size: 20px !important;
    }

    2/ If you wish to add image icons to the menu, please navigate to Dashboard > Appearance > Menus > select menu > Click on 8Theme custom link option > Menu option > there you may see the option Use img like, Choose/Select as image.

    Please refer to the provided images here: https://postimg.cc/v4BdVW9q , https://ibb.co/hc74CXh and https://ibb.co/K038K1f -You are welcome to use any icon image in the image box as per your needs.

    We hope this helps. If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Kind Regards,
    8theme team.

    Please contact administrator
    for this information.
  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.