In Tab view my navbar dropdow ul li swapping down, it should dropdown list should open in down, instead of next li-list swaping down for better understanding please find screen shots and working page url for your reference…
this is Tab view which I am getting:
on click of notifications (dropdown) my next profile li-list swaping down, it should not swap down.
working page URL:
www.acmearchitectural.com/sohail/index2.html
as always, your early reply appreciated.
This is a bit of a hack but a quick fix is to do this:
@media (max-width:768px){
.navbar-nav .open .dropdown-menu{
float:left;
margin-right:-999em;
}
}
However it only works for a small width range in that layout and then breaks again.
The problem is that the dropdown should really be absolutely placed and therefore will not upset the other elements on the line but you have changed it to static which brings it back in the flow and thus later elements follow on after.
I can’t see any easy fix other than a complete redesign of that top bar. It is never a good idea to put a dropdown menu inside a fixed container because as the dropdown expands it ends up below the fold and cannot be scrolled, unless you put the whole fixed header inside an overflow container, (which you have done), but then that stops you absolutely placing the menu in a kind of catch 22 situation.
Maybe you could place the notification and name dropdowns absolutely at the top of the page on smaller screen and just have the bell without text and a shortened name next to the image so it fits. I;m guessing though that when the menu opens the scrollbar on the fixed header will not expand to show the menu and you would have to scroll to see the menu.
Sorry I can’t see an easy solution to this and am short on time today:).
I had also tried this but its not a proper working for smaller viewports,
if you have some other way out to deal it please suggest me…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.