I want to make a fixed menu in HTML and it does not turn out very well for me, my menu is on the slider and I want it to scroll and emerge and have color. I just managed to keep it floating by placing it in the CSS position: fixed, does anyone know how I can do it?
Beforehand thank you very much.
slider
Use list to make ur menu.. then in css give each list element float:left. Also use a div tag make sure to put ur list in div tag... position:fixed auto
Related
while designing my website (for my school project), I find that my image keeps being placed on top of my navigation submenu when activated. Any help with what to do?
Here is a visual picture of what I am talking about
On a side note: any suggestions on which styles to wrap the text into a div/p tag to align properly by the laptop?
If I understand your question correctly, then you want your image of the laptop to stay behind your navbar, right?
If so, then you have so use the z-index CSS property.
Reference for it here:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
The higher the z-index, the further forward it will be placed. An element with z-index:100 will be displayed on top of an element with z-index:99 and below.
Set the z-index of your navbar to be 100 or so, then you're sure it will always be in the front, like such:
.nav {
z-index:100;
}
Add this code to your navbar css, and it should help.
Good luck with your school project!
Best regards, Kevin
I'm working on making a horizontal desktop navigation responsive. I've changed it to be displayed horizontally on smaller screens but now I have the issue with the drop down submenus, as they cover the parent items underneath. Instead I want the other parent items to be pushed underneath the dropdown.
So something like this
Is it possible to achieve this without jQuery? the people the website is for want to avoid using any more jQuery.
Without seeing code i'm just guessing here...
Try making your dropdown menus relative positioned.
.sub-menu {position:relative;}
Some time help for the this resources[http://www.w3schools.com/bootstrap/bootstrap_case_menu.asp]
Thanks,I've sorted it with setting the height to 100% and changing the position to relative
I want to implement a full page width mega menu inside a responsive "container" div.
Bootply example
I want to use a responsive container, but have the menu reach out to the edges of the window. I.e. it needs to expand outside of the parent element and not being limited by the container.
I've tried to use Yamm!3, but it seems to do the same thing as my example, which doesn't work. I know this whole thing kinda breaks the laws of CSS, but I was thinking that there might be some clever work around out there...
I found the answer. I needed to add position static to the dropdown and the next parent div. And then move down the dropdown-menu to make it appear below the menu.
Working example
you just add more style below:
.dropdown, .dropup{position:static}
I want to fix this menu bar at the top of the page, so that when user scrolls down, the menu bar continues to appear and the content flows into it. I tried everything, some help would be nice.
Heres the CSS and below the HTML:
CSS: https://www.dropbox.com/s/a0z0eov71wvha1c/style.css
HTML: https://www.dropbox.com/s/qyvb0oqhx8550ym/html.txt
Thank you!
Use the position: fixed css property. Then the position of the div is relative to the window's viewport rather than the content of the page.
You spelled position in #navigation wrong in your stylesheet, could that be the problem?
This is really easy if you correctly understand how the position attribute works in css.
I have a demo which should help you. You just need to understand how position:fixed is used to make the menu bar stick to top.
http://codepen.io/anon/pen/mvGqf
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/