Home Forums WoodMart support forum Header Builder Design

Header Builder Design

Viewing 30 posts - 1 through 30 (of 38 total)
  • Author
    Posts
  • #722393

    ha21cn
    Participant

    https://ibb.co/W48Ym1QZ
    On mobile devices, you can set up a custom button like this. I’d like to ask how to display a similar button on a computer?
    https://imgbb.com/upload

    #722430

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    The button shown in your screenshot is part of WoodMart’s Mobile Bottom Navbar (Sticky Toolbar) feature. By default, this functionality is designed for mobile devices only and is automatically hidden on desktop screens.

    Currently, WoodMart does not provide a built-in option to display the Mobile Bottom Navbar on desktop devices.

    Best Regards

    #723314

    ha21cn
    Participant

    https://ibb.co/ZpvbwHkv
    I added an image to the menu title, but why is this happening?

    #723315

    ha21cn
    Participant

    https://ibb.co/B2GyRzt6
    I’d like to know how to set the icons on the left to be the same size as those on the right? Also, how do I set the text for the sub-menus on the left?

    #723325

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

    #723345

    ha21cn
    Participant

    I’ve found a solution to the main menu icon display issue, but I haven’t found a solution for the sub-menu icon and font issues yet.

    #723388

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. Change the code values as per your requirement to adjust the font size and icon size.

    .wd-dropdown-menu.wd-design-aside .wd-sub-menu-wrapp > .wd-sub-menu > li > a {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    .wd-dropdown-menu.wd-design-aside .wd-sub-menu-wrapp > .wd-sub-menu > li > a .wd-nav-img {
        --nav-img-height: 30px !important;
        max-height: 30px !important;
    }

    Best Regards

    #723430

    ha21cn
    Participant

    I tried your code, and the display changes on the computer, but the images and text on the mobile device remain unchanged. How can I resolve this display issue between mobile devices and tablets?

    #723470

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.

    /* Adjust menu text size and weight on mobile/tablet */
    .mobile-nav .wd-nav-mobile li > a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: black !important;
    }
    
    /* Adjust menu icon/image sizes inside mobile sub-menus */
    .mobile-nav .wd-nav-mobile .wd-sub-menu li > a img {
        --nav-img-height: 25px !important;
        --nav-img-width: 25px !important;
        max-height: 25px !important;
        width: 25px !important;
        height: 25px !important;
    }

    Best Regards

    #723538

    ha21cn
    Participant

    https://ibb.co/KcZLNFZT
    https://ibb.co/8LPcxn7y
    https://ibb.co/wFp0P4xk
    I don’t know why the content cannot be vertically centered here.
    I am using Nested Carousel Element

    #723539

    ha21cn
    Participant

    https://ibb.co/WNySCzyj
    https://ibb.co/KxJ6dp3b
    The arrow color setting in the product image is not working.

    #723561

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    01. I have checked your site and was unable to find the announcement text bar in the top header.

    See Screenshot for clarification: https://postimg.cc/gX7rZRWK

    02. These settings are for the carousel arrows, not the gallery arrows. Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS:

    .single-product .woocommerce-product-gallery .wd-arrow-inner {
      color: #fff;
    }

    Best Regards

    #723971

    ha21cn
    Participant

    Because I was testing on a different website, not the one you logged into, I’ve now added this Elementor.

    Is your CSS code only for the arrows in the product catalog? I set the background using other code; how can I achieve a similar effect in your code?
    https://ibb.co/k2XK6Gtf
    The website login link has been sent to you.

    #723976

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    The CSS I shared changes only the arrow icon color.

    If you also want to style the arrow background like in your screenshot, you can use the following CSS in Theme Settings > Custom CSS:

    .single-product .woocommerce-product-gallery .wd-arrow-inner {
        color: #000;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        width: 45px;
        height: 45px;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    
    .single-product .woocommerce-product-gallery .wd-arrow-inner:hover {
        background-color: #fff;
        color: #000;
    }

    Best Regards

    #723983

    ha21cn
    Participant

    How do I configure a Marquee to be converted to a Slider? I haven’t seen any settings related to text sliders.

    #723988

    ha21cn
    Participant

    I just discovered another problem; the Thankyou Page isn’t working on the website I sent you as an admin login.

    #724010

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    01. The Marquee element and Slider are two different elements in WoodMart, and there is no option to convert a Marquee into a Slider directly.

    If you want to create a text slider/carousel effect, you can use the Slider elements available in WoodMart and add your content inside the slides.
    For a moving marquee-style text effect, you can continue using the Marquee element. It is designed specifically for continuous scrolling text and does not have slider controls such as navigation, autoplay slides, or pagination.

    If you can share more details about the exact effect you want to achieve, we can suggest the best approach.

    02. Your issue has been resolved. I have defined the checkout shortcode in the checkout page, and it is working fine. Please check your site and check the issue.

    See Screenshot for clarification: https://postimg.cc/v1Kgsc1J

    Best Regards

    #724127

    ha21cn
    Participant

    https://ibb.co/bMgZMFgK
    I tried your solution, but the content couldn’t be vertically centered. I don’t know why.

    #724154

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I’m sorry, but I am unable to find the marquee section on the website URL you shared in the private area of your previous message.

    Could you please share the exact page URL where the marquee has been added? So I will check it further and provide a possible solution.

    Best Regards

    #724159

    ha21cn
    Participant

    https://postimg.cc/nMvjjQpS
    I’ve sent you the pictures and links, please take a look.

    #724168

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I checked the settings, and the issue is related to the position of the carousel arrows compared to the content. The Arrow Offset Vertical option controls the arrows’ vertical position.

    Please adjust the following setting:

    Edit nested carousel Settings > Arrow Offset Vertical
    https://postimg.cc/VJQcS4Ww

    Increase or decrease the value until the arrows are aligned with the content vertically.

    Best Regards

    #724181

    ha21cn
    Participant

    Is this only adjustable manually? Isn’t there a default vertical centering setting? Normally, the arrow should be vertically centered along with the text content. Also, manually adjusting the position is different from the code, so it’s impossible to achieve perfect vertical centering.

    #724195

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I have checked your site, and the carousel arrows are currently centered with the content on your site.

    I noticed that you are adding this HTML block carousel in the Header Builder > Top Header, and currently you are editing the HTML Block: https://postimg.cc/XGQNJTD5

    I suggest adding this HTML block carousel from:

    Theme Settings > General > Header Banner and check how it displays there. The Header Banner area is designed for this type of content and may provide better alignment with the header layout.

    Best Regards.

    #724225

    ha21cn
    Participant

    https://ibb.co/tMf6b1kt
    Both of your proposed solutions are completely unworkable. Centering the arrow is a manual adjustment, but the content cannot be centered, and HTML Black cannot adapt to the header height.

    #724274

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please check your site now. I have added a new carousel on your site. You can review it and customize it further if you would like to use the carousel layout.

    If your goal is to have a continuous scrolling effect, I recommend using the Marquee widget instead (the same effect you are currently using on mobile). You can use the Marquee widget on desktop as well, as it is specifically designed for continuous scrolling content.

    If you have any questions, feel free to contact us.

    Best Regards

    #724289

    ha21cn
    Participant

    The effect you’ve achieved is vastly different from the screenshot I initially sent you, and the header banner is too large. I wanted to use a slider instead of a marquee.

    #724301

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    But you can decrease the header banner height from theme settings to set it. Navigate to Theme Settings > General > Header Banner > decrease the “Banner height for desktop”.
    https://postimg.cc/WqMHGjWB

    Best Regards

    #724330

    ha21cn
    Participant

    It won’t work. Even if you manually adjust your components, it won’t be as effective as setting them directly in the code, and it won’t achieve perfect centering of the content.

    #724352

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Sorry for the inconvenience.

    I tried to check your website again, but the WP Admin login link is no longer working.
    Could you please update the login details in the Private Content section?

    Also, please add the HTML Block containing the text you want to display in the carousel to Theme Settings > General > Header Banner. Once you’ve done that, let me know. I will check it further on your site and provide the best possible solution.

    Best Regards

    #724382

    ha21cn
    Participant

    https://ibb.co/QvPwYdRq
    The image in this component cannot be resized. This image is an SVG image. How can I process it to resize it appropriately?

    I’ve decided not to use your theme element to create the text slider. Your components are too cumbersome to operate, and it’s much easier to use custom code.

Viewing 30 posts - 1 through 30 (of 38 total)