I'm using an iframe to embed an Uberflip collection on a webpage, but the iframe seems to be clipping the drop-down nav menu above it and I'm not sure how to fix it.
http://www.eaglesflight.com/training-resources
There are 8 listed items under the training navigation header, but it clips mid-way through the sixth item. Any help is appreciated.
Related
I have added two navBar one after another, where the top Nav bar has a side drawer where the content beneath inside is shrining on clicking toggle button. While in other hand i am displaying another Nav bar beneath first nav bar, it also has a side drawer but while toggling it the content inside is not shrinking. I have tried that in all possible ways. Pls help me to fix that. Here i ma sharing the code sandbox link for that.https://codesandbox.io/s/persistentdrawer-pygrt?file=/PersistentDrawer.js
Thanks in advance
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 having a problem trying to achieve a navigation design I made.
Please see this link to have a look at the example http://lab.518studio.com/submenu
So as you will see I'm trying to have a full width submenu background, I used the position:absolute; but it presents me two new problems:
I cant get the sub-items aligned with the main item.
Content below it will not move down when it displays.
Basically what I want to do is to get the position of parent items under the correspondent main item and have the content below it moving when submenu is displayed.
I placed a link on the URL to download the HTML and CSS files.
Make the menu li position:relative and give submenu ul a width
I recently installed a drop down menu on my main menu bar and noticed something. The H1 header directly below it moves on the page when I activate the drop down menu. It's like the drop down menu pushes the text out of the way because it is in the way. The header or text moves back when the drop down menu is released. This also happens on other pages with text below. What is causing this and how can I correct it?
It's impossible to say with 100% certainty without seeing your markup, but I'd guess the nested list (ul) in your menu doesn't have it's position set to absolute. Setting it to absolute takes it out of the flow of the page so it appears above other content rather than forcing any content below it down. Show your markup and I can say for certain.
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.