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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.