I have a menu which is made as a list with inline items. While rendering correctly on large screens, elements move underneath the menu when the browser window gets smaller, instead of putting them to the right of the rest of the content.
With min-width:100%; for .drop_menu I was expecting that the menu would be 100% of the screen width at minimum, but stretch to fit more menu items in the x direction if necessary.
With width:500px; for .drop_menu it works, but I didn't want to give the menu a fixed width.
The reason that I want the items to overflow in the x direction is because I was going to implement a javascript scroller so the menu would scroll when the mouse cursor gets close to the edge. I can't scroll in the x-direction if there's no x-overflow.
I've created a jsfiddle of my failing menu here: http://jsfiddle.net/j41jfjqL/3/
Since they are inline, use white-space:nowrap to prevent the list items from appearing on a new line.
Updated Example
.drop_menu {
white-space:nowrap;
}
.drop_menu > li {
white-space:normal;
}
Since you don't want this to occur on the children li elements, set the white-space property value to normal.
Related
http://thehamburgercollection.com/shop/
If you look at the menu, you'll notice that all of the menu items are aligned left within a container in a single column. But what I want is for them to spread out evenly in a single row, and then to collapse into a hamburger menu at tablet and mobile size.
I know that <ul> is by default a block element, so I tried giving the <ul> with the id "menu-navigation-1" and the class of "menu" a style of
display:inline-block;
But nothing's happening.
I also tried assigning
display:inline-block;
to the div that encompasses the ul, which has a class of "menu-navigation-container", but that didn't work either. Once I'm able to distribute the menu items evenly in a single row, I'll be able to create the hamburger menu. This is a perfect example of how we want the menu to behave.
Close! The list item (li) elements need to have display: inline-block;, not the list itself (ul).
This will work:
.menu-item {
display: inline-block;
margin-right: 10px; /* add a gap between items */
}
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 am using drop-down menu in my header for notification, but when drop down opens all the div's behind that are visible then I gave z-index to all the divs but the links on those div's are not clickable now!
drop-down div CSS:
.drop-down{
overflow:scroll;
overflow-x:hidden;
}
and the div's behind it are
#main-div{
z-index:-1;
position:absolute;
}
I guess that the negative z-index places the links underneath the body.
Use a positive z-index, for example 10 on the element that should be at the back and 20 on the element that should be in front.
However I search, I cannot find a valid example....
I have a typical horizontal menu build with a :
div ul li a li a ... /ul / div
(li elements has align left)
Overflow hidden applied on div or ul does nothing. I have always a vertical adjust of li elements when I resize the browser to test the overflow behavior
I have played with position, etcs....
Can any "charitable" soul write an example or give a link?
Thanks....
If your div or ul don't have a specified height, they will grow to adjust to their content, and the content will not be treated as overflow.
Unless you properly clear: both; after floating your li elements, the div and the ul will have no height at all.
If you have done that, then it is not very clear what you are trying to hide, with overflow: hidden;
One thing is sure: You should figure out if the div and ul have heights and widths, and what those values are, and if they don't, you can manually assign them, to fit your toolbar (for example).
can we take this existing fiddle (solution) for a bar chart and apply different height values,
http://jsfiddle.net/RYBFF/1/
what actually happening is the bar items are anchored to top of ul container whereas it should be anchored to the bottom when we scale items.
li.different {
height: 80px !important;
}
for instance applying different class to one of the list items will demonstrate the problem.
change display mode to inline-block
remove float: left;
And eventually add some margin to the first item in the list.
vertical-align only applies to inline or inline-block elements. Your list items were block elements.
fiddle