I have a static aspx menu. (horizontal)
I have content on the screen the sometimes requires horizontal scroll.
I would like to keep the menu the width of the visable screen and centered while scrolling. AKA. the menu would stay in the same position on the screen even when the user scrolls.
Is this possible?
Thanks in advance!
EDIT: I'm relaly looking for simple. Even something that would just keep the menu items aligned left would work for me. So the menu bar can go all the way accross, but the items in it would align left, so the right most part fo the menu bar would be empty on longer screens...
Try this one..it works well for me. It uses jquery & css. I put it on my masterpages.
http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/
You can adjust the css to position it wherever you like
Related
On this page: http://diablogym.net/
When you use a mobile device like a tablet or cell phone the logo covers the menu icon button. I want that icon to appear on the right - logo on the left. I can't figure out how to do that. Can anyone supply the css to fix that?
thanks!
The styles on this site seem very messy...
In order to fix it I removed the float, position, width and height from '.nicdark_logo' (why is the height set to 10px?). I also took the position: absolute; off of '.nicdark_logo img'. This makes the logo appear above the menu.
Beyond these changes, I would suggest centering the logo and scaling it down a bit so your sticky header isn't taking up so much of the page.
okay I have a 100% width layout here and I have a sub menu on the left and content on the right side of the menu which have links which cant be clicked on because the left side sub menu has a z-index of 99 so I cannot click on the links on the right side content area. My sub menu is setup so that the overall area is 1000px in the center then auto right and left margins so the sub menu sits on top on the main content area. I tried to reposition without using the 1000px in the center but was not able to get it to work so that it stays on the left side of the content. I tried using pointer: none css for the submenu which allows the right side content links to work but then disables the sub menu button links.
Basically what I need is a solution which would allow both layered divs to have links on them...I dont know much javascript but is there any solution that will work on all browsers?
Here is the link to the site design http://liquidchrome.net/price_transfer/terminal-contacts.html
you can see that only the very bottom links on the right side content area work and none of the top links are clickable.
thank you
The HTML structure you are using seems to be the problem. It seems overly complicated when it doesnt need to be.
I suggest you restructure the basic layout of the core elements like in the link below
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
I have no idea how to go about this:
I have a full-screen background image, a navigation bar with 50% transparency fixed to the top, and content below it. How can I have the navigation bar maintain transparency over the background image, and still have scrolling content?
The issue right now is that when I scroll down, the content goes under the navigation bar, and shows through the transparency, which obviously looks awful.
Basically, I want the content of the page to scroll and disappear at the bottom of the navigation bar. I know I could make the navigation bar opaque and use a background image for that too, but I'd rather just have the one full-screen background image.
Thoughts?
Put the contents in a block (div) that has fixed size, say stretch it to the whole page except the size of the navigation bar. Then make that div scrollable with css property overflow:scroll
I know this is very old but I spent a lot of time looking for the answer and found a good solution so I will post it for anyone else looking for it.
Place the navbar in the element containing the background image and set the navbar's background to inherit. This prevents content from appearing behind the navbar as you scroll down.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.