Dropdown menu with HTML block issue

Hello

I am trying to figure out how to fix this.

1. Made a menu

2. Made HTML blocks for dropdown for each element of the menu.

3. I put the HTML full width because I couldn’t center the dropdown HTML element when I choose custom sizes. But I don’t want it to be full width and I want it to hide when people scroll left or right of the dropdown HTML block.
4. I have added “overflow-y:auto” and “max-height:560px” to the dropdown element because some of them are very long, with a lot of categories. This is ok, however when the scroll appears it pushes the content (the html block) to the left side. Maybe if the HTML block isn’t full width it won’t push it? I can also remove the left and right borders and this push won’t be so visible but I have to make it 1320px like the red menu so I can put box shadow.

I can provide administration access to the WordPress site because at the moment it is still under construction and has a front-page which redirects to our old website.

Forgot to mention that I have tried to limit the width of the HTML block by limiting the whole html, aka:

html {
max-width:1320px;
margin:auto; (to center it)
padding-right:0px;
padding-left:0px;

This made the HTML block 1320px but because the header is sticky it remains full width when the dropdown appears during a sticky header. Also, it puts additional paddings on the rest of the content and shrinks ia additionally, so I removed it.

Hello,

Thank you very much for choosing our theme and for contacting us.

The sub-menu block is positioned absolutely. It means that you can limit the width, however, you cannot align center with margin: auto;

You can slightly move from the left and get the result like this
https://prnt.sc/s6pqy0

If you accept, you can add the code to the Theme Settings > Custom CSS > Global:

body .menu-item-design-full-width .sub-menu-dropdown{
	max-width:1000px;
	left:30%;
}

Best Regards

Thanks for the fast replay
Unfortunately, it doesn’t look good:
https://ibb.co/fDF9nwf

Hello,

Your HTML block is quite wide I would recommend to leave it full-width.

As soon as your site is available I will try again.

Best Regards

Thanks
I will turn off the coming soon mode and made another home page.

Now, you can check the site here: https://bgm.bg/%d0%bd%d0%b0%d1%87%d0%b0%d0%bb%d0%be/

Hello,

I do not see your site now.

Contact me when it is ready.

Best Regards

It is now, had to clear the cache, sorry 🙂

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

Hello,

You can try this code:

body .sub-menu-dropdown.color-scheme-dark .container{
    max-height: 1000px;
}

Best Regards

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

I don’t know what else to do.

Hello,

Sorry, I have made a mistake.

Find this custom and replace:

https://prnt.sc/s7n0ip

body .sub-menu-dropdown.color-scheme-dark .container {
    max-width: 1000px !important;
}

Best Regards

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.

Hello,

Now your block is 1300px https://prnt.sc/s82x9y

Your site has not worked for long so I could not reply to you on time.

Best Regards

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.

Hello,

Please replace previous code to this one:

.menu-item.menu-item-design-full-width .sub-menu-dropdown {
  background-color: transparent;
  padding-top: 0;
}
.menu-item.menu-item-design-full-width .sub-menu-dropdown .container {
  background-color: #FFF;
  max-height: 550px;
  overflow-y: auto;
  box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.50);
  padding-top: 30px;
}

Best Regards

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!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts