CSS dropdown menu issue

Hello,

I have the following website varpix.com

if you go to: "Electronics" the right rest of menu is hidden and you need to Zoom-Out to see the rest of it.

Any css rule to overcome this issue please?
thebest8Asked:
Who is Participating?
 
Brandon LyonSenior Frontend DeveloperCommented:
Close. I would do this:

.leo-megamenu .navbar-nav {
  position: static;
}
.leo-megamenu .dropdown:hover > .dropdown-menu {
  /* Whatever is in here applies to all of the menus */
  max-width: calc(100vw - 8px); /* 100vw is the max width of the viewport. Minus 8px accounts for the scrollbars */
  left: -429px; /* This value depends on the width of the items to the left of the main menu ("categories, etc) */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
  max-height: calc(100vh - 194px);  /* Assuming the header height is always that tall. Adjust height as necessary */
}

.leo-megamenu li:nth-of-type(3):hover > .dropdown-menu {
  /* nth-of-type(3) will adjust the third child, which in this case is the second dropdown menu */
  left: -560px;
}

Open in new window

0
 
Brandon LyonSenior Frontend DeveloperCommented:
Are you trying to fit everything in the menu on a certain window size? Are you trying to make the entire area scroll? Do you want to move the menu left so that it can fit better in the screen? What is the desired outcome?
0
 
thebest8Author Commented:
Hello dear Brandon,

Thank you for your answer, I want to put the dropdown menu in the center, I believe this way it will be visible when the page is at 100% size
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Brandon LyonSenior Frontend DeveloperCommented:
What level of browser compatibility is needed? Do you need to support unusually old versions of Internet Explorer or other browsers?

This is the fix I would recommend without knowing more about your project:

.leo-megamenu .dropdown:hover > .dropdown-menu {
  max-width: calc(100vw - 25px); /* 100vw is the max width of the viewport. Minus 25px accounts for any potential scrollbars */
  position: fixed; /* So that the position of the element is relative to the window rather than the parent element. */
  left: 0;
  top: 194px; /* Assuming the header height is always that tall. Adjust height as necessary */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
}

Open in new window

0
 
thebest8Author Commented:
Thank you,

We got some result here. 2 tiny issues:

When you see the menu, some of it is hidden down the page, when you scroll down, the page goes down as well and doesn't let you see what is it down there

There is a small space in the right of the page
0
 
Brandon LyonSenior Frontend DeveloperCommented:
I forgot to add a max-height on the menu so that area becomes scrollable.
The max-width calc value can be adjusted to shrink the space if the scrollbar is narrow.

.leo-megamenu .dropdown:hover > .dropdown-menu {
  max-width: calc(100vw - 8px); /* 100vw is the max width of the viewport. Minus 8px accounts for the scrollbars */
  position: fixed; /* So that the position of the element is relative to the window rather than the parent element. */
  left: 0;
  top: 194px; /* Assuming the header height is always that tall. Adjust height as necessary */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
  max-height: calc(100vh - 194px);  /* Assuming the header height is always that tall. Adjust height as necessary */
}

Open in new window


To keep the menu position relative to the header when scrolling occurs some javascript would be needed. The problem is that position absolute would make it relative to it's parent (hence the left position issue you originally had) but position fixed keeps it in a fixed position.
0
 
thebest8Author Commented:
Thank you, it's good but not thaaat good haha :)

When you scroll down, the menu travels with with down the page... if there is any js code I can add it
0
 
Brandon LyonSenior Frontend DeveloperCommented:
Another option is to change the relativity of the parent elements.

.leo-megamenu .navbar-nav {
  position: static;
}
.leo-megamenu .dropdown:hover > .dropdown-menu {
  left: -339px; /* This value depends on the width of the items to the left of the main menu ("categories, etc) */
  /* REMOVED top: 194px; */
  /* REMOVED position: fixed; */
}

Open in new window

0
 
thebest8Author Commented:
Thanks for your efforts, but is it possible to show in the middle of the page (center) and once you scroll down you see the rest of the menu, and while you are scrolling down, it doesn't go down with you, you just leave it up there
0
 
Brandon LyonSenior Frontend DeveloperCommented:
Some of the earlier code appears to have gone missing.

.leo-megamenu .navbar-nav {
  position: static;
}
.leo-megamenu .dropdown:hover > .dropdown-menu {
  max-width: calc(100vw - 8px); /* 100vw is the max width of the viewport. Minus 8px accounts for the scrollbars */
  left: -429px; /* This value depends on the width of the items to the left of the main menu ("categories, etc) */
  top: 194px; /* Assuming the header height is always that tall. Adjust height as necessary */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
  max-height: calc(100vh - 194px);  /* Assuming the header height is always that tall. Adjust height as necessary */
}

Open in new window

0
 
thebest8Author Commented:
Now there is a space between the horizontal menu and the drop-down menu and of course, once you move the mouse pointer, it disappears

check the screenshot
Capture3.JPG
0
 
Brandon LyonSenior Frontend DeveloperCommented:
My bad I forgot to remove the "top" declaration.

.leo-megamenu .navbar-nav {
  position: static;
}
.leo-megamenu .dropdown:hover > .dropdown-menu {
  max-width: calc(100vw - 8px); /* 100vw is the max width of the viewport. Minus 8px accounts for the scrollbars */
  left: -429px; /* This value depends on the width of the items to the left of the main menu ("categories, etc) */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
  max-height: calc(100vh - 194px);  /* Assuming the header height is always that tall. Adjust height as necessary */
}

Open in new window

0
 
thebest8Author Commented:
You are my hero, Excellent, that is a good job :)

I have a question, I have added "Appliances" and the same issue happened again, I wanted to show it in the center, and I'm adding other menus... what to do
0
 
Brandon LyonSenior Frontend DeveloperCommented:
Each additional top-level menu item would need to have it's left position specified. For example:

Instead of:

.leo-megamenu .dropdown:hover > .dropdown-menu {
  left: -429px
}

Open in new window


you could use:

.leo-megamenu li:nth-of-type(2) .dropdown-menu {
  left: -429px;
}
.leo-megamenu li:nth-of-type(3) .dropdown-menu {
  left: -570px;
}
.leo-megamenu li:nth-of-type(4) .dropdown-menu {
  left: #px;
}

Open in new window


etc
0
 
thebest8Author Commented:
Ok, so it should look like this?

.leo-megamenu .navbar-nav {
  position: static;
}
.leo-megamenu .dropdown:hover > .dropdown-menu {
  max-width: calc(100vw - 8px); /* 100vw is the max width of the viewport. Minus 8px accounts for the scrollbars */
  left: -429px; /* This value depends on the width of the items to the left of the main menu ("categories, etc) */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
  max-height: calc(100vh - 194px);  /* Assuming the header height is always that tall. Adjust height as necessary */
}

.leo-megamenu li:nth-of-type(2) .dropdown-menu {
  max-width: calc(100vw - 8px); /* 100vw is the max width of the viewport. Minus 8px accounts for the scrollbars */
  left: -60px; /* This value depends on the width of the items to the left of the main menu ("categories, etc) */
  overflow-y: auto; /* Depending on device size, the contents of the menu might be larger than the window size. */
  max-height: calc(100vh - 194px);  /* Assuming the header height is always that tall. Adjust height as necessary */
}

Open in new window

0
 
thebest8Author Commented:
Thank you, it worked, before I close this question, How do you find the child?
0
 
Brandon LyonSenior Frontend DeveloperCommented:
In browser developer tools you can see the structure of the markup. A child-parent relationship is something like this:

An unordered list <UL> is a parent element with direct children which are <LI> tags.

chrome-developer-tools.png
0
 
thebest8Author Commented:
thank you very very very much
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.