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.
Related
I created a vertical menu on the left. The menu has an option - position: fixed.
The problem is, I don't know how to prevent the rest of the page from overlapping under the Menu. I want the code to understand that part of the menu is taken and can only use the rest of the page.
I thought about splitting the menu into "inner-l" (left side) and the rest of the sections in "inner-r" (right). I put the specified width% in inner-l and the same in inner-r. However, it doesn't work. The issue still exists. :/
I'm working on Wordpress site which I have modified the main menu to have the logo placed in the center which links to the home page. I've used a <span> to achieve this. I have given it a title attribute of home so that when the responsive menu kicks in at 767px it reads Home and not blank. Until it reaches that break point, I want it not displayed so it only shows the logo. I'm having trouble finding the right CSS
you can see the page here http://s513195336.onlinehome.us/
and this is the CSS I'm trying to work with
ul#menu-main-menu li#menu-item-3377 a title{ display:none }
I feel like I'm close because if I remove a title the menu item disappears.
What you will need to do is create two elements, one with the title and one without, and show or hide the desired element with media queries. Meaning, at 767px, the element without the title attribute will be set to display:none, and the one with the title would be set to display:block (or whatever), and the opposite for over 767px. Make sense?
This is easily found with the browser inspector. I prefer Chrome. Right-click on the item you want to inspect, and make sure you have the right tag. You will see the css in the inspector for that item. If you hover the section on the top right part of item inspection, a caption will appear with the exact address in the root directory.
Use FTP to make changes or your c-Panel
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
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 have a dynamic sub-menu that gets programmatically constructed in the code behind. Whenever a large amount of items are added, the scroll arrow appears to allow scrolling of the sub-menu, but when it does appear, it also seems to truncate the menu text because the sub-menu width is not correctly sized to accommodate the text.
The problem is not the scrolling itself; that is working the way I want it to. The problem is that the menu width is shortened and this is truncating the menu text when the scrolling arrows are presented for large menus.
This problem seems to be in IE7, because it is working fine in IE6, the width of the menu is of the appropriate size to fit the text. Has anyone experienced this before and how did you fixed it?
you can wrap the menu in a div and set overflow:scroll on that, but that applies to the entire menu, not the drop-down part. You can't change the drop down part on the standard menu, but it you use the CSS Adapters (http://www.asp.net/cssadapters/) you can change the size and scroll capabilities of the drop-down parts. However, this gives the standard scrolling - you see a scroll bar around the section and you have to scroll manually, it's really not a very nice experience. What you probably want is something that gives an arrow at the top/bottom to allow scrolling as you hover over it, to bring the items into view; this cannot be done without rewriting the menu control. If you need this functionality you might be best to look at a third party menu control, or even one of the ajax frameworks which might have something. jQuery...