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.
Related
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%);
}
I am trying to fit a progress bar into the parent, which is oddly difficult. It is done on a Jot form, but with access to custom CSS and so on, which I have utilized a lot (that could have created the problem I guess).
The progress bar is positioned fixed at the top, and is in the parent element div.form-all as the very first and second element. I have tried all the common suggestions on here about box-sizing and so on, but nothing seems to work.
My suspicion is that it is because the parent element does not have an explicitly stated width, as this fixes the problem monumentally (but breaks the responsiveness, as it goes from ≈36% width to 100% on small screens).
Any help would be greatly appreciated. The actual form can be found here, at Jot form, in Danish:
All added custom CSS should be visible by inspecting the elements, but I will mention that it has worked before.
The div containing the progress div has the following css-attributes:
.progressBarContainer.fixed {
position: absolute;
top: 0;
width: inherit;
background: #FFF;
z-index: 9999;}
The parent has by Jotform-coding the following relevant attributes, with no position attribute:
.form-all {
width: 690px;
width: 100%;
max-width: 690px;}
Thank you in advance, Kris.
Absolute Position Solution:
You said you are using position: fixed, but this won't inherit the width of the parent. You need to change .progressBarContainer.fixed to position: absolute, and then the form parent, .form-all, add position: relative.
This will then set the width of the progress bar to be the same as the form.
Fixed Position Solution:
There are a number of ways you can keep the progress bar sticky on the screen. You will either have to explicitly state the max-width of the progress bar in the CSS, or CSS with a JavaScript solution. The simple CSS solution would be to keep position: fixed assigned to .progressBarContainer.fixed, but then you have to specify max-width: 690px to .progressBarContainer.fixed.
Its position is fixed that's why it gets the whole screen's width when it's set to 100% width. See here for reference
Assuming that you want the progress bar to stick to the top and since the container element .form-all has a max-width property of 690px try applying it to the progress bar element as well to prevent it from expanding to 100% of the screen width.
Otherwise simply remove the fixed positioning from the progress bar.
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
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.