We are facing a problem with the bottom frame on the phone

The bottom header overlaps. I want a code to modify the bottom header on the computer and laptop so that it is like the phone header, which can be scrolled and the sections do not overlap one another.

Attachments:

You must be logged in to view attached files.

Hi saadeldeen.mee,

Please re-send admin credentials, I will help you to double check.

Regards,

We use an HTML Block in the bottom header with the Marquee feature to make it move automatically. However, we want the header to be static while allowing users to scroll it manually using the mouse (left and right) to view the remaining categories. We want this adjustment to be applied to both computers and tablets.

To see the exact example of what we want in the bottom header, you can access the website using a mobile device and observe how the bottom header behaves. This is exactly what we want to implement on other devices.

Hi saadeldeen.mee,

Please check my configurations and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

#menu-header-botton-1.wd-nav{
    display: block;
    white-space:nowrap;
    overflow-x:auto;
}

#menu-header-botton-1 li{
    display: inline-block;
}
  
.wd-menu #menu-header-botton-1.wd-nav-horizontal>li>a {
    min-height: auto;
}

::-webkit-scrollbar {
  height: 5px;              /* height of horizontal scrollbar ← You're missing this */
  width: 5px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

Regards,

Unfortunately, what was required was not implemented in the way we wanted. We see that the sections appear in the middle of the header. We want what we want is to display the sections in the header completely from the beginning of the header to its end, that is, the sections take up the header completely in the display, with the ability to scroll to the right and left.

Attachments:

You must be logged in to view attached files.

Hi saadeldeen.mee,

You can edit header, set Container widget’s with bigger but should smaller than 100 to make scrollbar appears. https://ibb.co/5h37W8Xp

Regards,

I want Aizaz to be the one to solve this problem because he understands what I want well.. You, my dear, generous person, did not fulfill what was requested.

Hi saadeldeen.mee,

Sorry for what I provided solutions are not useful. I assigned the topic to my colleague, he will checks and reply to you soon.

Regards,

I am tired I have not received a response yet to solve my problem

Hello,

Just to confirm, do you want to disable the automatic scrolling effect in the bottom header on desktop and tablet devices and instead enable a manual scrollbar so users can scroll left and right?

Please let me know so I can assist you accordingly.

Best Regards,

Hello my friend I hope you are well, yes everything you said is true and very clear this is exactly what I want to do ❤️

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.header-bottom .wd-marquee {
        animation: none !important; /* Disable marquee effect */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        white-space: nowrap !important; /* Prevent wrapping */
        display: flex !important;
        gap: var(--wd-marquee-gap);
        max-width: 100vw;
        scrollbar-width: thin; 
    }
    .whb-header-bottom-inner .wd-marquee-content {
        animation: none !important; /* Disable marquee scrolling animation */
        min-width: auto !important; /* Ensure content fits naturally */
    }

Best Regards,

Scrolling from right to left does not work

Hello,

Now check back your site and check the issue, the scrollbar is showing fine now: https://ibb.co/bgXcMRmz

I have modified the custom css code on your site in Theme Settings > Custom CSS > Custom CSS for desktop.

Best Regards,

We want to hide the sticky bar at the bottom when scrolling. I want it to be hidden because the shape is very simple and not compatible with the site’s style.

We want to hide the sticky bar at the bottom when scrolling. I want it to be hidden because the shape is very simple and not compatible with the site’s style..

Attachments:

You must be logged in to view attached files.

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

@media (min-width: 768px) { 
    .whb-header-bottom .wd-marquee {
        animation: none !important; /* Disable marquee effect */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        white-space: nowrap !important; /* Prevent wrapping */
        display: flex !important;
        gap: var(--wd-marquee-gap);
        max-width: 100vw;
        scrollbar-width: none; 
    }
    .whb-header-bottom .wd-marquee-content {
        animation: none !important; /* Disable marquee scrolling animation */
        min-width: auto !important; /* Ensure content fits naturally */
    }
    .whb-header-bottom .wd-marquee::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    .whb-header-bottom .wd-marquee {
        -ms-overflow-style: none;    }
}

Best Regards,

Brother, you did everything right, but we need some modifications, as you can see in the image below, the first category appears in the lower header, and at the end of the header we also want the content not to be repeated in the header. + I hid the scroll bar, but we hope that there will be an option to scroll without showing the scroll bar that is at the bottom.

Attachments:

You must be logged in to view attached files.

Hello,

You are currently using the marquee widget, which is designed for continuous scrolling content. However, since you are not utilizing marquee scrolling, this is causing the repetition issue you’re experiencing.

I recommend not using the marquee widget in this case. Instead, try adding the content as a menu item in the bottom header. This will provide better control over its display and prevent unwanted repetition.

Once you have updated the setup, let us know, and we will review it to provide the necessary custom CSS adjustments to achieve the desired appearance.

Best Regards,

It has been converted to a menu, so we ask you to make the list a moving scroll so that it does not go out of the list as shown in the image in other languages.

Attachments:

You must be logged in to view attached files.

Hello,

I’m sorry, but I can’t log in to your site. Can you please share the WP admin login URL in the private area so I can check and give you a possible solution?

Best Regards,

You can now log in normally.

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.whb-header-bottom .wd-header-nav {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.whb-header-bottom .wd-header-nav::-webkit-scrollbar {
    display: none; 
}
.whb-header-bottom .wd-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--nav-gap);
    min-width: max-content; /* Ensures enough width for scrolling */
}

Best Regards,

Scrolling does not work on desktop and tablet

Hello,

Please check this video: https://uploadnow.io/f/WNMG01n

The menus are scrolling fine on the desktop using the touchpad. If you’re using a mouse, you can scroll horizontally by: Holding Shift and using the scroll wheel.

Best Regards,

[Author]

Posts