Dropdown menu with HTML block issue

URL of the main page is:
https://bgm.bg/%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%BE/

Changed it to max-width but nothing happens, I mean absolutely nothing – still stays full width.

I don’t know what else to do.

Thanks for the code, but the menu is still full width. I need it to stay at 1300px and end where the red header menu ends. This code only shrinks what’s inside the menu but the overall menu is still full width.

It is okay – we are still working on the site and making the connection with our warehouse program. We will probably leave it like that for now because next week the site must go live, but I would very much like to fix it.
The block is 1300px but I would like to remove these elements that are in orange (in your screenshot, where you have put the text “This block is 1300px”), on the left and right side of the block. I need to do this so that the dropdown can disappear if a person moves the mouse cursor there. At the moment, because the dropdown is full width, it can only disappear if the cursor goes up (above the dropdown) or down (below it), or of course if the customer chooses and clicks on a category. On smaller screens, it limits the customer navigation even more. Some of the dropdowns are quite big and it’s difficult.
Also, because the menu is full width when I expand some of the categories in the dropdown menu and it becomes more than 550px height, the scrollbar appears (the scrollbar for the dropdown, not for the whole site) and it appears at the end of the screen. If the whole menu is 1300px without these elements in “orange”, the scrollbar will appear just next to the menu.
These are the 2 reasons.
Switching to boxed layout still leaves the dropdown menu full width and only limiting the HTML (html { max-width:1300px; } ) to specific width cuts it, however, this way it adds additional paddings or/and margins (left and right) to the rest of the elements on the page, or I don’t know what happens but it shrinks the other content a little bit. Also, this way works only when the sticky header is not applied, because when we have a sticky header, the dropdown menu is still full width. Of course, I managed to limit the width a little bit with:

html .sub-menu-dropdown.color-scheme-dark {
     max-width:1300px;
 }

But this way the menu wasn’t centered and was moving.

Great code 🙂

It fixed the scrollbar exactly the way I want it. It also made the background transparent, which added the visual goal of the menu. Still, it doesn’t hide when I hover on the transparent background but at least it looks better 🙂

Thank you!