I have two divs which are .navbar and .content. .navbar is fixed, and .content overlays .navbar when scrolling.
JSFiddle demo is here. Please make the result panel bigger, so it doesn't show mobile menu.
But when I open dropdown menu, it is hidden under .content. Even if I set higher z-index than .content on dropdown menu, it's not working. Is it just the way it works, or am I missing something? Is there any fix on that without modifying HTML?
UPDATE:
.content div should overlay .navbar div when scrolling exactly like the demo.
just set z-index: 1 for .content and z-index: 2 for .navbar
http://jsfiddle.net/7D77j/1/
CSS :
.content {
z-index: 1;
}
.navbar {
z-index: 2;
}
.navbar z-index is less than your .content z-index thats why dropdown is not coming above the content div
Just use this css:
.navbar{
z-index:3;
}
Demo: http://jsfiddle.net/lotusgodkk/7D77j/2/
then you should remove the .navbar-fixed-top class and the padding on body
http://jsfiddle.net/7D77j/6/
Related
I am trying to make this Wordpress site responsive, by adding the following custom CSS:
#media (max-width:959px) {
.container, #menu, #featured, .slide .overlay, .slide .overlay2 {
width: 100%;
}
img {
max-width: 100% !important;
height: auto;
}
#menu {
height: auto;
}
}
However, when I move the width of the browser view port to 900px say, #menu (the top navigation menu) will increase in height to accommodate #menu's LI elements which have floated down and left, but #content-full (the parent container of the image slider) will creep up over the bottom half of #menu, hiding the LI elements which have been pushed down and left.
The theme contains:
#content-full {
position: relative;
}
So why does #content-full act like it is position: absolute?
Thanks.
The problem is not with the content but with the header. The #header has an attribute height: 134px. And the #menu inside this header has been given position: absolute. Since absolutely positioned elements are taken out of context before rendering, the parent (in this case #header), would not grow to accommodate the height of #menu as expected. That is the reason why the height has been explicitly specified. The content is not behaving as absolutely positioned. It is the aforementioned behavior of the header that makes it look like that.
One workaround this could be to provide an additional style that changes the height of #header to accommodate the next row of the menu.
Something like this for max-width: 959px
#header {
height: 174px;
}
This would take care of the second row of menu items.
Note: Your background image used for the menu would then break. Because it has been made for that single row of menu. I would suggest replacing that background image, with CSS-gradients and rounded borders.
I am struggling with something.
I have two menus (http://www.omicronsolucoes.com/mat/), and I need the logo to be over the first menu. For this, I added a z-index:1 on the first menu.
But now the links on the first menu wont work (because the z-index made them go behind).
How could I maintain the logo as it is and make the links working again?
Thanks.
Try adding this to your css, not sure from where it is coming but nav#ubermenu-main-13-header-menu is getting z-index as -1, so either you add this to your css file
nav#ubermenu-main-13-header-menu {
z-index: 999 !important;
}
or try removing the z-index -1 from where is it getting applied
Try adding position relative and a greater z-index to the li. Then either remove position:relative of the ul or override it with position:static:
.ubermenu-nav{
position:static;
}
.ubermenu-nav > li{
position:relative;
z-index:11;
}
I have added margin-top:-50px; to .logo class
nav .logo {
max-height: 100px !important;
max-width: 200px !important;
margin-top: -50px;
}
What is the best no JS way (most commont browsers friendly) to achieve this?
I have found a few related questions & answers:
width: 100% / number_of_li-s_in_ul;
http://jsfiddle.net/qx4WG/ ("static" calculated size for each li) - unable to use due different sizes of li
li {display: table-cell;}
UPDATE: http://jsfiddle.net/jwJBd/1035/ -> works good, but I'm also using sub-menus and position: relative; doesn't work here to position the sub-menu below current li. When position is set to static it enlarges the parent LI every time it's set to display:block;
display: box;
never used it before, just read a few articles and it looks like the browser support is minimal
If i understood your question correctly, you want to display evenly menu elements like a table would do AND be able to display css sub-menus using absolute and relative positioning.
Your jsfiddle was close, the only thing i had to fix was the positioning of the sub-menu
.sub-menu {
display: none;
/*left: 0;*/ /* i removed this */
position: absolute;
/* PLAY with this */
}
jsFiddled here
[post edit]
It would also be relevant to set your <li> parent with a table-layout:fixed property. This way, <li> will be set to equal width.
#horizontal-style {
display: table;
width: 100%;
table-layout:fixed; /* try this */
}
I downloaded a CSS Menu from here and trying to make some changes, here is fiddle file jsfiddle and the full screen result.
Now I trying to do 2 things:
Make Logo text/image not to have hover
Fix the width, I put 100% but if you look at full screen result you will notice what is wrong
Change line 42 to: #navbar li:not(:first-child):hover {
This will make sure the hover effect is not applied to the first <li> which in your case contains the logo. jsFiddle
This is called CSS Selectors Level 3
To fix your nav position use:
#nav {
width: 100%;
position: fixed;
margin: 0 auto;
left: 0px;
}
EDIT: if you still want the little margin on each side use:
#nav {
position: fixed;
margin: 0;
left: 1%; /* you can change this to whatever margin you like */
right: 1%;
}
and add:
#navbar {
width: auto;
}
Try #navbar>li:first-child~li:hover. I updated your fiddle at
http://jsfiddle.net/PHPglue/h4uL6/7/
If you do need a fixed position for some reason, wrap the entire code in a <div>, position:absolute; it and give it the same width and margins as I gave #nav to this <div> then make #nav's position:fixed;.
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.