I'm wondering if there's a way to adjust the navbar in MaterializeCSS to prevent the double row when the number of elements exceeds the width of the browser. I was thinking about some scrollable navbar like the tabs:
But I can't find a way to implement it.
Taking inspiration from nav-tabs, which exhibit this behaviour as standard:
Set nowrap, overflow and width on the link container (UL in this case).
nav ul {
white-space:nowrap;
overflow-x: auto;
width: 100%;
}
Set display, and unset the float on links (LI in this case).
nav ul li {
display: inline-block;
float: none;
}
Codepen
Related
I am trying to modify the CSS code for the underlying Worpress theme for this site: https://isspm2021.webs.upv.es/. The theme is this one: https://wordpress.org/themes/escapade/.
What I am trying to do is get a vertically scrollable left menu when the screen size is, say, 1024 × 768.
This is what I get now:
As you can see, the last items of the left menu remain hidden and inaccessible, depending on the screen size. I would like the left-hand-side menu to be vertically scrollable when needed.
I've tried several CSS instructions, like overflow:scroll, without success.
I think it is because of the theme itself; more precisely, because of the way the different div elements are defined to be placed regarding others (position:relative and so on).
Any hint of how to modify the CSS style of this theme to get what I need?
I would suggest these for the menu to be scrollable:
Set a height for the menu part,
Set Overflow-y:auto;
Here's the solution:
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
Also, If you want the scroll to appear when the browser size is less than 1024px, put the code below:
#media all and (max-width:1024px){
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
}
The above are two options.Please don't insert both of them.Only use one at a time to see the changes.
If you can accept the full left navbar scrollable, you may add overflow: auto property in .side-masthead:
.side-masthead {
background-color: #f5f5f5;
overflow: auto; /* Add overflow property */
}
I have a site that I am working on.. and would like to know how to span the menu items evenly across the menu bar.
I know how to do it technically, but I want to make sure it's correct.
I want to be able to add another menu item and still have it look normal or overflow properly, etc.
The site is http://phillysuburbanhomes.com
Okay, so I added
.wpsight-menu li {
width:14%;
text-align:center
}
(more menu items were added)
My issue now is, that the full menu item doesn't show now
http://phillysubrubanhome.com - you can see what it's doing live
Currently there are 5 menu items, im assuming you would be adding another menu item thus making it 6 menu items.
The width of the container is 980px. Divide it in 6 parts which comes to 163.33. We need to give the width in percentage i.e 16.66%.
Set the width for each li as 16.66% and center-align the text.
Your css would be as follows:
ul#main-menu li{
width:16.66%;
text-align:center
}
Okay so I combined one of your methods with this this and it worked:
.wpsight-menu li {
width:14%;
text-align:center
}
.wpsight-menu a {
display: inline-block;
margin: 0 5px 0 0;
text-decoration: none;
}
Use CSS to give your anchors (a) the same padding and margins on the left and right and a percentage width of the li, like this;
ul#main-menu {
width: 100%;
}
ul#main-menu li {
width: 20%; /* for 5 menu items */
padding: 0;
margin: 0;
display: inline-block;
}
ul#main-menu li a {
padding: 0px 5px;
margin: 0px auto;
display: block;
}
and change the width of the li depending on the number of menu items.
That should do the trick!
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'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.
A note ahead: I did look for answers before asking but none of which i found accurately explained how to do this right.
I have some DIVs, somewhere within i have an UL which is supposed to stretch to a 100% of the parent DIV, and within the UL i have a (varying, due to dynamic content) amount of LI-elements which i would like to equally share the space the parent UL provides to them (which obviously should be 100%).
I tried various solutions, such as inline-block on the LIs, as well as float:left and automatic width on the LIs
I created a JSFiddle here.
How can i achieve the desired result (with no use of JS) and at least major cross-browser compatibility?
Use display: table; with width: 100%; on the UL and display: table-cell; on the LIs:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
background: #eee;
}
http://jsfiddle.net/Kyle_Sevenoaks/EfWze/1/