Im having problems with superfish menu displaying inline with "responsive design" I would like to have all superfish menu links displayed inline but im having problems that superfish for submenu override all styling that i tried and always display dropdown.
Anyone know how can i disable superfish animated dropdown on mouse hover when im browsing with less than 700 px device and display all elements inline-block of superfish menu elements, submenu and submenu elements.
Current code from website is too messy so i uploaded it here http://pastebin.com/mwPjVEPX
This is directly from site.
For first ul li elements i added display:inline-block and it works but in submenu elements, first javascript from superfish add element style display:none and visibility:hidden, and when i try to add display:inline-block to override it on first hover it went back to display none.
And here is css of superfish menu http://pastebin.com/vmYkGVx4
First of all you didn't specifically mention your code here or any link. But as i guess, all the properties you specifies to a parent, they automatically appends to its child element.
So, If you give display: inline; then its all children will get it and behave as if they are inline. So It is better to go display: inline-block;. In this case this element will behave as an inline element but itself showing as a block level element. And child will never be inline .
Despite your CSS, the Superfish JavaScript continues to run at small screen sizes. JavaScript hides and reveals things by attaching an inline style attributes to alter the CSS display property. Inline styles will always trump CSS from any other source unless you add the !important keyword like so: display: inline-block !important. That will be worth trying. However, as the JavaScript will still be trying to act on the elements, you may still find other weird behaviour arising. Please let us know how you go.
Well at the end i ended up using mobilemenu . It's javascript code that on selected width hide superfish menu and display dropdown select box. From all searches it's most reasonable to use. There are some developments on superfish menu to support touch devices but still it's not supported for "responsive design" although there are posts on various blogs talking that next step is to make it responsive, untill than i used this addon https://github.com/mattkersley/Responsive-Menu
Related
How can the drop-down user menu be displayed above all elements? In this case the menu (in Secondary Header ) slips under Page Title.
I'm using the "drop_down_login-7.x-1.3.tar" module
which css rule I must use?
Best Regards See Image Example
Did you try z-index? Find the z-index of the overlapping element and then add a higher index for your pop-up.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You can use z-index in your css, but it must be higher than other divs which overlap on your dropdown.
I want to show a popup with content in random websites.
The popup is a div I create and the content is coming from an editor with its own CSS.
Since I dont want the site CSS to effect the look of the popup I have some css to reset general things like table width inside the div that runs before the div content css.
The problem is what to do when the site uses !important on some general css like table width. I know I can add !important to the reset css so table width will reset inside the div but the content includes html/css I take from the editor which doesnt include !important. so adding !important to reset the site CSS will kill also the content CSS.
Any solution to this dreadful situation?
I have a problem with css overflow property for twitter bootstrap dropdown component with submenus.
When setting max-height and overflow to auto the scrollbar appears in the list as it should, but submenus go inside the drop down list under horizontal scroll, which is not what I need.
Here is the example of this issue.
http://jsfiddle.net/ftMhv/1/
I've tried changing values overflow-x and overflow-y, but none of them worked well.
When using overflow in the matter you described it will hide all children within it. Unfortunately there really is no way around it.
Why do you need a scrolling navigation dropdown? Is it because it is too long?
I would suggest trying a columned approach if that is the case. Have <div>'s within an <li> that have float: left; and then place submenus within them.
Sorry, but I think this is the only answer to your issue.
Edit: You could use javascript and jquery to create a floating absolutely positioned container that displays at the coordinates of the user's mouse. That will probably get pretty hairy and complicated though.
I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie "underneath" the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to "click through" these dropdown divs?
I know that there is "pointer-events:none" But this would seem to disable all clicking on the dropdown menu, which I cannot have.
I've seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don't block divs that are positioned "underneath" so what's the solution here?
Is it something I need to fix with the positioning of my dropdown menus?
Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren't clickable! Then I did "clear:both" and it moved down and finally realized the hidden divs were in the way.
It seems like you're using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.
You should be hiding them differently, with either of the following:
Use visibility: hidden or display: none (if you want to also hide it from screen readers)
Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
This will ascertain that they're still readable by screen readers.
Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.
I'm building a website, and would like to make aa navigation bar with submenus. My menu items are entirely image based. I have an image for each item, and each item hover. I'm just not sure how to go about doing it this way, I only know how to make one without use of images. Thanks
do the same thing like you would do with textbased navigation. after you've finished set your li a {text-indent:-9999px} this will hide the text description (this is anyway nice to have for mobile and seo), now create an image-sprite with your images and position them nicely with in css with the background-position property.