I've created a div that I have positioned absolutely over this map:
Here, the element I'm talking about is a div containing the four white ovals. So this div has position: absolute; z-index: 1. Now notice the hamburger button in the top right - this opens the side navigation menu, like this:
However, as you can see, the aforementioned div is rendered on top of the the nav menu, which I've assigned a z-index of 2 to. (I've also tried significantly higher numbers). I seemingly can't tweak the z-indicies such that the side menu renders above this div. How can I fix this?
This is not an issue when I set the position of the div to relative, however, for aesthetic purposes I need it absolute.
It is worth noting that the side menu is contained in a wrapper element, which comes before the main tag that the aforementioned div is within, i.e
<wrapper> /*side menu is here */ </wrapper>
<main> /* div with ovals is here */ <main>
I don't know how your Side Menu is rendered, is the menu in the wrapper or the button, maybe it's been appending outside the wrapper.
If this isn't the case than try adding an extra class to a container (body or html) does also work if the Side Menu is open.
Than add a css rule which applies on the overlay buttons, but check if the open class is appended and than change the z-index to -1
Example:
#buttonDiv {
z-index: 1;
}
body.sideMenuOpen #buttonDiv {
z-index: -1;
}
I hope I could help
Related
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
I have been trying to edit my dropdown menu so that the sub-items are centered beneath the parent items. I finally achieved the centering only to find that every time I hovered over a parent item to reveal the drop down menu, the rest of the menu fell to the bottom of the dropdown menu.
Here is the link to the sample, it has all the coding on one side. Thank you in advance for your help! I am just starting out with CSS and HTML and no matter how many videos and tutorials I watch and read, I just can't seem to get it right :(
https://www.w3schools.com/code/tryit.asp?filename=FEEMWLIFAMAO
Try to add vertical-align: top; to your .dropdown css like so:
CSS
.dropdown {
vertical-align: top;
}
Also on a separate note I would remove the width on .dropdown-content and instead put the width on .dropdown to make sure they are both the same width and no wacky horizontal position changes on hover. Another solution is to make the dropdowns position: absolute; and position them relative to the links. But off-topic :)
You could set the dropdown-content's position to absolute. To center the dropdowns, you have to position them relative to the parent's width. This would look something like this in your .dropdown:hover .dropdown-content {:
display: block;
position: absolute;
left: calc((100% - 150px)/2);
width: 150px;
text-align: center;
To explain the positioning a little further:
100% refers to your parent's width. Take the difference of this and the 150px you specified as the width of your dropdown-content. Since you want your box centered below the menu button, this difference has to be divided between the left and right side, hence you have a padding of (100% - 150px) / 2 on each side.
Both the parent element and the child element you are trying to position relatively to said parent have the position: relative property applied to their styling, which is inappropriate for the result you seem to be trying to achieve.
Have a read on the css position property and its values.
Explanation: your child element is being displayed as a block, which by definition occupies a horizontal space on its own, while being positioned relative to its parent element, therefore pushing the rest of the latter adjacent navigation elements under said parent element.
Solution: The navigation effect you seem to be trying to achieve is generally done by positioning the subnavigation absolutely, relative to the navigation element that makes it appear on hover: its parent. This way said subnavigation does not affect the positioning of the elements where it is hierarchically placed inside the html code.
CSS:
.dropdown:hover .dropdown-content {
position: absolute;
display: block;
width: 150px;
text-align: center;
//To position the element:
top: 100%;
left: 50%;
transform: translateX(-50%);
}
In Wordpress, I'm trying to style the dropdown menu used in .primary-menu. Unfortunately, things don't really go as planned.
I copied the HTML from the inspector in Chrome and removed the clutter such as href's and id's and tried to debug it in jsFiddle: https://jsfiddle.net/1cL8fq8b/1/
When hovering over the last item in the results tab, .sub-item seems to take the width of it's parent. I gave .sub-menu an absolute position to make it independent. Still I can't get .sub-item to have it's own width.
Here's a screenshot for a better view.
How can I make the sub-item to have it's own width, and not rely on it's parent's width?
You can add a negative margin-left style to extend your drop down menu to the left.
.sub-menu {
position: absolute;
right: 0;
display: none;
margin-left:-100px;
}
See this: https://jsfiddle.net/jokbd6L5/
Or define a custom width for your drop down:
.sub-menu {
position: absolute;
right: 0;
display: none;
width:100px;
}
See this: https://jsfiddle.net/hjoctv5x/
Since its position is absolute I don't think there is a way in CSS to make it expand according to the width of its content (variable width). But you can write some javascript to calculate the max content width for each dropdown menu and set the dropdown menu width accordingly.
It's because on hover its display is set to block. Set it to inline-block instead
First and foremost.. read this http://learnlayout.com/position.html
absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
So basically absolute positioning only takes it out of the document flow
also.. this piece of code..
&:hover .sub-menu
is only targeting the submenu. Try targeting the li of the submenu to give it its own width. the submenu ul (which is what your targeting has nothing to do with the width of the li's unless they are sized based on percentages.
I have a project that hides and shows elements using the visibility parameter. Another element is pushing the text in these elements down and I need to know if there is a way to force the text back to the top of its element. I have tried different display parameters, floats, etc and haven't found anything (other than absolute position) that will work. The problem with absolute positioning is that the container div will then hide overflow instead of expanding with the content. JSFiddle
check JSFiddle for example and code
The problem you are having is the relative position of the list:
#list {
position: relative;
left: -25%;
}
If you switch to using margin-left instead of left, you get the layout you want:
#list {
margin-left: -25%;
}
http://jsfiddle.net/TL969/2/
With relative positioning, surrounding elements are not affected by adjustments. Surrounding elements are layed out as though no adjustments were made to the positioning. By positioning it with negative margin instead, surrounding elements are affected, and thus you free up room for the text.
I have a Bootstrap Navbar with two menu elements aligned to the right:
The point is that I would like those elements to be aligned to the inferior border of the bar and I would prefer using absolute positioning rather than playing with their padding and margins. As you can see in the Firebug screenshot below those menu items are childs of a div that covers the precise area where I would like to position them (for those not familiar with firebug the blueish area corresponds to the browser position of the underlined code):
Now, my question is, why adding the css .nav.navbar-nav.navbar-right{ position: absolute; bottom: 0px; right: 0px; width: 230px; } results in the menu elements moving further to the right of the area of its parent? I would expect them only to move down, not right. (Result shown below with firebug still shadowing its parent position).
Disclaimer: As you can check below (another firebug screenshot) .nav.navbar-nav.navbar-right corresponds indeed to the child of the previously underlined div:
Bonus: Any help moving down these menu elements without using padding and margins and keeping them within their parent's area will be appreciated.
An absolute positioned element is generally not influenced by any other element. To get it working, give the parent element a position: relative;.
.navbar-collapse {
position: relative;
}
Then the absolute positioned element is dependent on its parent element.