I'm trying to centre the menu on my Wordpress site with CSS:
http://thewholesomebakery.co.uk/
I'm aware that I have to remove float:left; but then solutions seem to vary from theme to theme.
Can anyone help me out with this?
Use this css:
.site-bar .nav {
width: 100%;
float: none;
text-align: center;
}
.navigation > li {
float: none;
display: inline-block;
}
You can remove the float and add margin: auto;. The page of the w3c about centering things is an absolute must-read for any web developper.
Change your css to:
.site-bar .nav {
float: left;
width: 100%;
padding-top: 3px;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
that should center the top navigation!
Related
I'm trying to recreate the Google homepage as part of theodinproject and I'm having trouble trying to get the navbar across the top to the right.
I tried display: flex and float: right but I'm not sure how to get the Images, Gmail, and Sign In button to the right. I've been told that my style isn't being applied also. Would anyone be willing to help? I'd greatly appreciate it. Below is a snippet of my html and css code and a link to how the page appears.
https://i.stack.imgur.com/pAgDn.png
<ul>
<li><a><button>Sign in</button></a></li>
<li>Images</li>
<li>Gmail</li>
</ul>
</header>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}```
Seems like your only mistake is not having a <style> tag around your css code. Try this.
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}
</style>
Using float is not necessary for that, you can definitely use display: flex. The minimum to understand about flex is that it affects child elements only, so if you want to have a navbar which appears on the right for example, you need to use display: flex on the parent.
.header {
display: flex;
}
<div class='header'>
<div class='navbar'></div>
<div class='logo'></div>
</div>
You can also use justify-content to choose how they align among the main axis (by default the horizontal one)
For something like this I'd add justify-content: space-around or justify-content: space-between.
I'd highly recommend reading more about Flex, as it's super useful.
Good resource:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to wrap the css styling inside a as in the example below:
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}
</style>
and also you need to remove the characters at the end ( ``` )
Try using:
header {
width: fit-content;
margin-left: auto;
}
For example, I did the top part using this idea. This is how it looks.
html {
font-family: sans-serif;
color: #333;
}
header {
width: fit-content;
margin-left: auto;
}
li,
ul,
buttom {
display: inline-block;
padding: 0 1ch;
}
li {
font-size: 0.85em;
color: #555;
}
img {
display: block;
margin: 0 auto;
width: 20em;
padding-bottom: 1.5em;
}
main {
padding: 20vh 0;
width: fit-content;
margin: 0 auto;
}
input {
margin: 0 auto;
display: block;
border: 1px solid silver;
border-radius: 2.8em;
height: 2.8em;
width: 40em;
}
<header>
<ul>
<li>Gmail</li>
<li>Images</li>
</ul>
<button>Sign in</button>
</header>
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<input type="search">
</main>
I hope it works!
so this is how my navigation looks:
Quite unbalanced right.. my minds kinda fkd up. I have no idea what I am doing already. I'd like to ask some help how to center it out. This is the code of the css:
.navigation {
width: 886px;
height: 84px;
background: url('../img/nav_bg.png') no-repeat;
margin: 0 auto;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none outside;
padding-top: 22px;
padding-left: 63px;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Flexbox is not yet 100% supported cross-browser
As you can see from this link: http://caniuse.com/#feat=flexbox
Flebox nowadays is quite well supported but if you carefully look at those symbols on each square you notice that the support is not full but partial on some browsers (especially mobile).
Global (with prefix)
82.47% + 10.5% = 92.97%
unprefixed:
71.8% + 0.38% = 72.18%
You should to add a prefix if you really want to use it.
**
Using a different method - display:table;
**
On the other hand, I suggest you to use another approach which is much more stable and supported on all browsers:
Look at the support of display:table;
Link: http://caniuse.com/#search=display%3Atable
To solve your problem you can remove all your padding-top with fixed values and use vertical-align:middle and display:table-cell. This way no matter what is the height of the ul it will be always vertically centered.
Center horizontally the ul element using text-align:center;
Center vertically the ul by setting the .navigation container with display:table; and the ul element with display:table-cell; and vertical-align:middle;
Code example:
.navigation {
width: 100%;
height: 84px;
background: lightgrey;
margin: 0 auto;
display:table;
}
.navigation ul {
padding: 0;
list-style: none outside;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Check Jsfiddle: http://jsfiddle.net/a_incarnati/bmkspm69/1/
Flexbox might be able to help you here. To center your li's with flexbox all you would have to do is add these styles to .navigation ul
.navigation ul{
display:flex;
justify-content: center;
align-items:center;
}
Give a text-align: center to the ul.
In general, for centering some elements inside a parent, parent should have text-align:center and the childs should have display: inline-block or display: inline.
HTML:
<ul>
<li>A</li>
<li>B</li>
<ul>
CSS:
ul {
width: 400px;
text-align: center;
}
li {
display: inline-block;
}
I am having some problems getting my menu to center on the screen. I thought setting the display to block, and making the left and right margins to auto, would do this for me; however, I was wrong. Here is a JSFiddle to help show the problem. Thanks for the help.
<ul id="menuList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
#menuList{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
float: left;
margin-right: 0.5em;
}
#menuList a
{
display: block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
set menu to inline-block and parent to text-align:center
JS Fiddle
replace body with your parent id or class
body {
text-align:center;
}
#menuList {
display:inline-block;
}
The best way to center an element is by using margin: 0 auto; but the element need to have a fixed width (not 100% as you have).
So just add:
#menuList {
width:408px;
margin:0 auto;
}
Vitorino's answer is generally a bad idea. You don't want to put text-align: center on your body.
You could, however, set that CSS on the ul, and display the menu items inline(-block). As such.
#menuList ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menuList li {
list-style: none;
display: inline-block;
margin-right: 0.5em;
}
You have to change the width, example:
#menuList{
display:block;
width:70%;
margin-left:auto;
margin-right:auto;
}
You used display block, so that your elements start new line, and then floats, that they would stay in same line. Just don't use this weird combo.
If you need items stay in line use 'display:inline;'
if you need items to stick to either left or right side of parent element, use floats. Be careful as floats often mess all the thing up. There are other ways to float things, that doesn't pull them out of document flow.
Here is fixed CSS:
#menuList{
display:block;
width:100%;
margin: 0 auto;
text-align:center;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
display: inline;
margin-right: 0.5em;
}
#menuList a
{
display: inline-block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
I know there are a lot of answers with this subject but it still doesn't work somehow with my code.
Every time I try to center the text with text-align center it doesn't work unless I remove float: left, display: inline or display: inline-block. But then I have a vertical centered navigation bar...
Can anyone help me with this?
This is my HTML code:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Moviekids festivals</li>
</ul>
</div>
and here is the CSS code:
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: arial;
background-color: white;
}
#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}
.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
text-align: center;
}
.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}
You need to set the text-align on the parent element like so:
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
See Demo
I just edited your css to acheive what you need
.nav ul {
list-style-type: none;
text-align:center;
}
.nav li {
display:inline-block;
text-align: center;
padding: 10px;
}
.nav a {
text-decoration: none;
display: block;
color: #1d1d1b;
}
DEMO
Always avoid using body text-align try using instead for wrapper.
Make sure you have mentioned <!DOCTYPE html> on the top of your HTML code.
Otherwise your code seems perfect.
I am having difficulty with centering the navigation bar on this page.
I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it.
#nav ul {
display: inline-block;
list-style-type: none;
}
It should work, I tested it in your site.
Add some CSS:
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
If you have your navigation <ul> with class #nav
Then you need to put that <ul> item within a div container. Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block;
that should center it.
Just add :
*{
margin: 0;
padding: 0;
}
nav{
margin: 0 auto;
text-align: center;
}
The best way to fix it I have looked for the code or trick how to center nav menu and found the real solutions it works for all browsers and for my friends ;)
Here is how I have done:
body {
margin: 0;
padding: 0;
}
div maincontainer {
margin: 0 auto;
width: ___px;
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
ul li {
margin-left: auto;
margin-right: auto;
}
and do not forget to set doctype html5
Your nav div is actually centered correctly. But the ul inside is not. Give the ul a specific width and center that as well.
You could also use float and inline-block to center your nav like the following:
nav li {
float: left;
}
nav {
display: inline-block;
}