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!
Related
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
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.
I'd like to create a fluid horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container . Nav links are all different widths. The first link should be left-aligned and the last link should be right aligned.
I've had limited success using techniques such as:
ul {display: table;width: 100%;}
li {display: table-cell;}
a {display: block;}
and also using
ul {text-align: justify}
li {inline-block }
but no code I've written seems to deal at all well with elements that are different widths. The spacing does not seem to stay equal as the nav is resized.
I need the nav to be fluid, first and last elements to be flush against the edge of the containing ul and for the elements to be equidistant from each other
I thought about this for a while and came up with two reasonable approaches, both of which are pretty good but not exactly pixel perfect. One is CSS based only and the second is aided by jQuery (JavaScript).
CSS Approach - pretty good approximation
Consider the following HTML:
<ul class="nav ex1">
<li class="first">Home</li>
<li>Collections</li>
<li class="tight">About Us</li>
<li>Slocklists</li>
<li class="tight">Trade Enquiries</li>
<li>Press</li>
<li class="last">Contact Us</li>
</ul>
I added some classes as hooks for the styling.
The CSS is as follows:
.nav.ex1 {
outline: 1px dashed blue;
width: 100%;
margin: 0;
padding: 0;
display: table;
}
.nav.ex1 li {
display: table-cell;
outline: 1px dotted gray;
width: 20%;
white-space: pre;
text-align: center;
}
.nav.ex1 li.first {
width: 1%;
}
.nav.ex1 li.last {
width: 1%;
}
.nav.ex1 li.tight {
width: 1%;
}
In Example 1, the ul.nav parent container uses display: table and width: 100%. The child li elements are table-cell's. I added white-space: pre to prevent some of the links from wrapping into two lines, and text-align: center to keep the text centered.
The trick is to force some of the table-cell's to shrink-to-fit the text, and you can do this by setting width: 1% which is non-zero but too small to hold the text (unless your screen is 10,000 pixels wide). I shrink-to-fit the first and last cells which forces them to align to the left and right edges of the parent container. I then force every other table-cell to shrink-to-fit by added the .tight class.
The remaining table's cells will have a width of 20% which will keep them evenly spaced between their two nearest neighbors. HOWEVER, there will be some slight variation in spacing among the links in the row, which is why I call it an approximation.
jQuery Aided Solution
In Example 2, the markup is essentially the same and the CSS is:
.nav.ex2 {
outline: 1px dashed blue;;
margin: 0;
padding: 0;
display: block;
overflow: auto;
width: 100%;
}
.nav.ex2 li {
float: left;
display: block;
outline: 1px dotted gray;
width: auto;
}
In this case, the li elements are floated left and I use width: auto.
The trick is to calculate the magic left-margin value and apply it to all the li elements except for the first one.
The jQuery action is:
$(window).resize(function () {
navResizer();
});
// On load, initially, make sure to set the size.
navResizer();
function navResizer() {
var $li_w = 0;
var $ul_w = $(".nav.ex2").innerWidth();
$( ".nav.ex2 li" ).each(function( index ) {
$li_w += $(this).innerWidth();
});
var li_margin = Math.floor(($ul_w-$li_w)/6);
$(".nav.ex2 li").not(".first").css("margin-left",li_margin);
$("p.note").text( "Widths: ul.nav: " + $ul_w + " all li: " + $li_w + " Left margin: " + li_margin);
}
Basically, the action calculates the width of ul.nav ($ul_w), and the total widths of all the li child elements ($li_w).
The left-margin is calculated by ($ul_w - $li_w)/6 where 6 is the number of gaps between the 7 links.
The key line of code is: $(".nav.ex2 li").not(".first").css("margin-left",li_margin);
I use .not(".first") to omit the first li element and then .css to set the left margin.
The one slight defect is at the far right where the link is not quite right justified, but you can fix that by floating the last li to the right.
For the most part, if your link texts were similar in length, you would be hard pressed to distinguish the two. Both approaches are not quite pixel perfect, but pretty good.
Fiddle: http://jsfiddle.net/audetwebdesign/xhSfs/
Footnote
I tried some other approaches using text-align: justify and inline-block, but the CSS engine does not treat inline-blocks like regular words, so will not justify a line of inline-blocks.
Setting left-margin to a % value will not quite work at some window widths and the right-most link will not be on the edge as desired.
The jQuery approach has been tried before, see:
Evenly-spaced navigation links that take up entire width of ul in CSS3
You can use text-align: justify; and ignore the last left-justified row. #last is invisible and takes up the last row because of padding-left: 100%;: http://jsfiddle.net/mwRbn/
if you want to align the text of the menu vertically, use height in combination with line-height:
ul#nav {
text-align: justify;
width: 100%;
background: yellow;
height: 2em;
line-height: 2em;
}
http://jsfiddle.net/mwRbn/1/. Do you need a IE<8 hack?
I have a div (#socmed) with an ul containing li's which i have positioned at the top right of my page. You can find the div inside the header tag. These are social media buttons by the way.
http://digilabs.be/tutu/collection.php
As you can see, it only shows up in chrome and safari (haven't tested in IE yet).
I have tried changing the z-index, because I felt like it got overlapped by the parent div, which is colored pink. But that didn't seem to work. I have no idea what to do.
Thanks in advance for all help.
In your main.css:Line 73
Add a width to the <li> item.
#socmed li {
list-style: none outside none;
margin-top: 5px;
width: 25px; /* Add this width..! */
}
This seems to fix your problem.
Your outer #socmed div has width: 25px, but your <li> within it does not, and by default it is larger then the 25px as specified on #socmed, so would not display.
2 CSS adjustments you can make. First make a relative container (not fully tested on your page, but usually a good practice...
header {
position:relative;
}
Second, define a width for your ul list items in your header...
#socmed ul {
width:30px;
}
Hopefully this helps
This issue is related to the width of div#socmed:
#socmed{
width: auto;
height: 125px;
position: absolute;
top:8px;
right: 40px;
}
Originally, you set width to 25px, and this was not wide enough to show your icons.
This question from:
ul, ol {
margin: 0 0 10px 25px; // to margin:0
padding: 0;
}
please don't in the ul,ol such values margin: 0 0 10px 25px; It is a gobal.
I have put relative div in relative container. It worked.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to