I have a vertical menu in my system which is basically made of HTML ul/li with CSS styling (see image below). However I don't want the li items which are wider than the menu to wrap, I would prefer them to overflow with a horizontal scroll bar at the bottom of the menu. How can I do this in CSS?
ul {
overflow: auto; // allow li's to overflow w/ scroll bar
// at the bottom of the menu
}
li {
white-space: nowrap; // stop the wrapping in the first place
}
Use white-space:nowrap. Like so:
li {
white-space:nowrap;
}
Here's some documentation.
You would also need to give the style the ul:
ul{
width:250px;
overflow:auto;
}
Related
I'm confused about why my paragraph doesn't begin in a new line based on the overflow property of the previous element.
Check out my plunker, change the overflow property in line 11 to hidden and it will work fine. On visibile, it screws up the view.
I know doing a clearfix can fix this issue, but what I'm interested in is why overflow is doing this to my view;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
overflow: visible; /* Change this to visible/hidden*/
}
The problem is that because your ul has float: left; the text element goes by default on its right. So when you add the overflow: hidden; property it clears the area around the list.
There is also a great read for floating elements.
Let me clear you something overflow:hidden make the UL clear because it is shorter form of :after{clear:both;content:"";display:block;}
but in overflow:hidden it clears it self and take it's height but nothing will be shown outside of this.
In this example you have floating elements and the parents UL is not taking its width and height that is why paragraph goes beside to it. when you add overflow:hidden then UL takes its height and width because it is shorter form of has layout property :after{clear:both;content:"";display:block;}
Hope so you will be cleared by this
Thanks
It is due to the property of float left in anchor. Remove overflow property from ul, it will work excellent.
Add the following properties in css to:
ul{ font-size:0px;}
ul li{ vertical-align:top; display:inline-block;}
ul li a{ font-size:16px; float:none;}
As can be demonstrated in this fiddle, adding too many elements in a Bootstrap .nav causes it to just add items vertically down. How would I go about limiting its height and making it horizontally scrollable?
First you need to tell the ul to not wrap and overflow into a scroll bar. Then the li elements need to not be floated and display inline. This will do it:
ul.nav {
white-space: nowrap;
overflow-x: auto;
}
ul.nav li {
display: inline-block;
float: none;
}
Fiddle: http://jsfiddle.net/bmfcd3zt/8/
Try this:
.nav{flex-wrap:nowrap;overflow-x:auto}
First, here is a fiddle that I've found on a scrolling implementation of tabs.
Second, I don't think that it's a good UX to provide so many links in a tabbar. I recommend you to use dropdown menus or mega menu.
I have a problem with my dropdown or submenu. It worked perfectly fine before, but after I changed my menu to be floating, the submenu won't show anymore.
this is the code I used for menu:
border-bottom:2px solid #e9e9e9;
position:fixed;
width:2000px;
background-color:#ffffff;
padding-left:605px;
padding-right:210px;
margin-right:-200px;
And this is my website
http://lobaab.com/
could you help me on how to fix this plz
Nested ULs are hidden by display: none in the default state, and you never change this property to block.
.sf-menu li:hover > ul {
display: block !important; /* importnat isn't necessary if you know how strong selector you need to use */
}
Than, you set width: 100% for submenu, but it´s width of their parent (LI). You want probably set higher width, or don´t set the width exactly and use only white-space: nowrap - submenu will have the width of the longest item.
I am having some grave difficulty to center a silly menu on the pages of my website. I know I can set the width of an outer div to a px value, but how can I make it so it centers for a responsive website? Here's the page:
http://103.4.17.225/~america/index.php/product-menu/vertical-garden/gro-wall-3
The menu is the benefits,gallery,etc.
Thanks guys , you're the bomb.
First, remove the float from the ul and set it to inline block;
.met_main_nav ul {
float: none;
display: inline-block;
}
Then use it's parent (the nav element) to center it, This will center any inline-block elements inside it (i.e the ul):
.met_main_nav {
text-align: center;
}
To center horizontal menus I often use a inline-block approach instead of a float one, try adding this to your stylesheet:
.sidemen .nav { text-align: center }
.sidemen ul li {
float: none; /* this will override your current line, just for testing */
display: inline-block;
}
If you add the code into your stylesheet, you can delete your current float rule, and just adding the display one.
The menu will be centered, no mater if you resize the browser, unless you do up to extreme narrow size, in which I'd recommend using media queries to adapt the menu rendering (reducing the margin or adapting styles to show in two lines perhaps).
I have this CSS menu:
http://jsfiddle.net/7JC8t/
If you hover your mouse over 'inostranstvo' you will see a dropdown open below it. What I've been trying to do but failing is to get the dropdown items to look like the items in the horizontal menu.
So when a user hovers over 'inostranstvo' the items that show up should have: the same width (width of the widest item), same height and background as the existing menu items.
The background is easy, but I can't force the height and I don't know how to align the widths. This doesn't do anything:
#nav li:hover ul li{
height:55px;
line-height:55px;
width:200px;
}
The width value is random, what's most important is the height, which I can't seem to force on the list items. On the other hand, adding a border works, but it adds it inside the red background area. I'm sure this can't be complicated, but I can't figure it out.
Have you tried to set the submenu li elements to "display-type: block"?
I have added the following css to JSFiddle and it seems to work:
#nav li:hover ul li {
display: block;
background: #DE2211;
border-bottom: 1px solid black;
}