I'm having a little trouble centering the menu items in my Wordpress theme. You can see the site here: http://tinyurl.com/k2aq3sh
I tried margin:auto but no dice. Here is the current CSS:
#primary-menu-container {
margin-bottom:-27px;
margin-top:-10px;
text-align: left;
float: left;
max-width:1020px;
}
Any help would be greatly appreciated!
If you mean to center the whole menu in the nav bar, do it like this:
#primary-menu {
list-style: none;
display: flex;
justify-content: center;
}
One way of doing this would be to remove the floating of the #primary-menu-container div and the list items. Instead add display:inline-block to the list items and from there you can add text-align:center to the ul element
#primary-menu-container {
...
float:none
}
#primary-menu{
...
text-align:center;
}
#primary-menu li, .default-menu li {
...
float:none;
display:inline-block;
}
Related
I have my links stacked vertically in my default CSS, but I'm trying to push the nav to the top of the page and set them horizontally in mobile. Can't seem to make it happen.
The site is in WordPress, which makes determining the names of elements difficult.
#sidebaar a, #sidebaar li {
text-align:right;
clear:both;
}
#sidebaar{
width:150px;
text-align, right;
align-content:right;
display:inline-block;
width:100%;
}
In media styles:
#sidebaar a, #sidebaar ul li, #sidebaar ul li a{
display:inline;
clear:none;
} #sidebaar{
width:100%;
}
My site can be viewed here - http://www.ubart320.org/students/mariaroo/gallery/
Your header and navelements contain (in different rules) both width and max-width definitions of 150px for max-width and 160/360px for width which prevent your menu from getting any wider.
You have to define width: 100%; and max-width: none; for both, if necessary, add !important to those values
You have some funky code going on. For some reason you have two menus showing on mobile. However, I set the second menu to display: none; and applied these styles to get an acceptable result (apply this to you mobile styles):
nav{
width: 100%;
max-width: none;
}
ul#menu-menu-2{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#menu-menu-2 li{
margin: 0 2.5px;
}
See the end result below. It looks like you still have some work to do on the photo grid, but the horizontal nav is acceptable. Let me know if you have any further questions!
I am using this template on my website: http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle: http://jsfiddle.net/uPw85/
What I need help with:
1) Center the menu on the page, as you can see on the link it's left aligned.
2) Still keep the text in the drop down menus aligned to the left (just as in the link above).
I've searched this page and on Google a lot before asking for help and none of the results have worked for me. I've tried just about every tip I've found but the menu still won't be centered for me, the only thing that happens is that the text in the drop down menu is centered but I want to keep it to the left.
I've tried with multiple variations of these in different places (nav, menu, li, ul) in the CSS but with no luck:
display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;
EDIT 2/10, 1 PM EST: I appreciate you guys trying to help but so far none of the answers you've given has helped.
Try this:
ul.sf-menu {
text-align: center;
}
ul.sf-menu li {
display: inline-block;
}
ul.sf-menu li a {
display: block;
}
ul.sf-menu ul {
text-align: left;
}
EDIT:
I've edited the JSfiddle: http://jsfiddle.net/uPw85/3/
EDIT 2:
Remove float: left in ul#nav, or just remove the id="nav" in the ul-tag in the html
In order to center the menu you need to set the width of the child div to be smaller than a set width of a parent. Additionally need to remove the float of the menu as floating an element effectively takes it out of the parent div.
Try setting the following:
ul.sf-menu {
float: none;
width: 760px;
margin: 0 auto;
}
Works when inspecting element. Another alternative would be to try the following code.
ul.sf-menu {
float: none;
display: table;
margin: 0 auto;
}
Just add:
ul#nav {
float:left;
padding-left: 80px;
}
I have spent like 4 hours and still cannot fix it, I have 2 divs, one floated left and one right, in left div I have text and in right I have a <*ul>, when I use text-align:center; based on media query for the left template it works perfectly, but I also want the <*ul> to be centered when the browser width is reduced. Please take a look here and let me know what I am doing wrong and where exactly ? http://goo.gl/OJ5OHt THANKS A LOT to anyone who helps me get out of this..
The problem is not so much the UL but the children LI, that are floated left.
You have two options:
A)
Set a fixed width to UL and center via margin auto:
.social-icons ul {
margin: 5px auto;
width: 220px;
}
B) Remove the float from the children LI, set them to inline and set their children A to inline-block (and then UL text-align would work):
.social-icons ul {
text-align: center;
}
.social-icons ul li {
display: inline;
float: none;
}
.social-icons ul li a {
display: inline-block;
}
The only ways I can see to do this is to add the following to your ul style under your media query:
margin: 0 auto;
width: 217px;
It needs to be a fixed width.
OR
Change your ul to:
text-align: center;
And your li and a items to:
display: inline-block;
Either way should work.
So on my website I'm trying to get my Nav menu to align center but it's not working for some reason. I tried applying
margin-right: auto;
margin-left:auto;
I also tried other CSS tricks but it still won't align center. Can someone look at my site with firebug and tell me what I'm doing wrong?
my website is http://dev.pti-world.com
I thought I knew CSS decently well but obviously not since I am having this little problem I can't figure out.
If you want to center it you can use margin: 0 auto;
There are 2 lines you need to change in your css:
You have the width of the ul on 100%.
You have the ul with float left.
Solution:
#megaMenu ul.megaMenu {
float:left; <---- delete this because with a float you cant center it.
}
and change this
#megaMenu.megaMenuHorizontal ul.megaMenu {
width: 950px;
margin: 0 auto;
}
try to wrap your navi again and give the wrapper
text-align:center;
and your navi
display:inline-block;
Give your ul centered text, and make your lis not floated and inline-block:
#megaMenu ul.megaMenu {
text-align: center;
}
#megaMenu ul.megaMenu > li {
float: none;
display: inline-block;
}
That will work back to Internet Explorer 8.
I want my li elements that form a horizontal menu to be distributed evenly across the width of my ul element. I normally float my li elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my ul element to the right edge?
Here's an example jsfiddle of a menu not distributed across the ul.
The spacing has to be the same between each li. But the li elements may be different lengths.
Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).
CSS:
nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}
I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu
EDIT: You can make it look like it spans better by adding this:
CSS:
nav div ul li:first-child {
text-align: left;
}
nav div ul li:last-child {
text-align: right;
}
again, untested, just typed.
You'll need to set the width of the li elements to force them to fill the space:
ul {
width: 100%;
}
li {
float: left;
width: 33%;
}
(Fiddle demo)
If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%.
I have two answers for you.
If you want to stick with the float model:
Your ul element needs to have the overflow property set (without this property, your ul (or any element containing floated elements) is not given a height (this is expected behavior, mind you: http://www.quirksmode.org/css/clearing.html) and will therefore default to a height of 0 - the effect of this will be that if you set different background colors for your ul/li and body, the background of your ul will not seem to display).
ul {
text-align: center;
width: 300px;
overflow: auto;
}
Your li elements need to have widths set, otherwise - as floated elements - their width will be set to whatever they contain. I've used pixels, below, but you can use a percentage value too.
li {
float: left;
margin: 5px 0 5px 0;
width: 100px;
text-align: center;
}
Use the display:inline-block property for your li elements (if support for old browsers isn't a priority). IE 7 does not support this, so it's not useful if you need wide cross-browser support, but it creates the effect you want - though make sure you then delete any spaces between your </li> and <li> tags, otherwise they will be counted in the overall width and will show up as spaces between the elements.
One advantage that this method has is that you don't have to know or set the width of the container ul if you use percentage widths on your contained li elements, you still get the centering for free with the text-align property you already have. This makes your layout very responsive.
Here's markup and CSS that works the way I think you are requesting:
Markup:
<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>
CSS:
li {
display:inline-block;
margin:5px 0 5px 0;
width:33.33%;
}
ul {
text-align: center;
}
If you'd rather keep the markup on multiple lines, then you'll have to fiddle with the left and right margins of your li elements in the CSS.
If you add li elements, you'll have to change the percentage width to match (for example, with four li elements in your markup, you'd need to change your CSS to have a width of 25% for each one).
Html:
<ul>
<li>1</li>
<li>2 <br>4</li>
<li>3</li>
</ul>
Css:
ul {
list-style: none;
font-size: 0;
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
font-size: 100px;
display: inline-block;
}
codepen
I don't get your question clearly so I assumed that you might want this:
li {
border:solid 1px red;
clear:both;
display:block;
float: left;
margin: 5px;
width:100%;
}
ul {
text-align: center;
width:300px;
}