Hi,
In the following header of our coming soon site:
We have a secondary inline navigation which opens upward instead of downward. The dropdown is long and part of it is not visible.
How can that be changed so it will only open downward?
It seems that there are two attributes called data-x-stem=“dr” and data-x-stem=“ur” that control it.
It also seems to me that it is determined by the the user’s scroll.
How can that be fixed?
Thanks!
Hi There,
Thanks for writing in!
I can see the menu is opening downward.
Actually, this is the normal behavior of a inline navigation, when it won’t get enough space downward it opens upward.
To fix this issue please add this CSS to your theme option -> Global CSS and let us know how this goes.
.e2077-21 .x-dropdown {
top: 50px !important;
}
Hope this helps!
Hi, the screen size determines if it opens upward or downward - so that is probably why it was fine on your end.
Your solution solved the issue but created a new issue, the inner right dropdown is opened beneath the parent item:
Can you please help to resolve?
Thanks! I appreciate your great help!
Hi again,
Please replace the previous code with the following code:
.x-menu > li > .sub-menu {
top: 50px !important;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
Thanks! that solved the issue.
You’re more than welcome, glad we could help.
Cheers!
Hi, sorry to bring this up again but we discovered new issue that arises with the given CSS you provided, the upper menu dropdown is covering the parent menu item:
.x-menu > li > .sub-menu{
top: 50px !important;
}
How can that be solved?
Thanks!
Hi,
You can adjust that under Theme Options > Header > Navbar > Navbar Top Height(px)
Thanks
Changing this value did not fix or even affected slightly the issue I mentioned:
I did not customize anything so please provide a working solution for that issue.
Hi There,
The provided custom CSS will apply for all navigation menus. To fix this issue, please update the previous CSS to this:
/* 1st menu */
ul.x-menu.x-menu-inline.separator-menu > li > .sub-menu {
top: 85px !important;
}
/* 2nd menu */
ul.x-menu.x-menu-inline.separator-menu-divisional > li > .sub-menu {
top: 50px !important;
}
Hope it helps 
Did the trick, thanks!
Glad it worked.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.