I am trying to place Unsorted List in Navigation but I want it to be in the center of header-box.
<div class="header-box">
<nav>
<ul>
</ul>
</nav>
</div>
http://jsfiddle.net/9zWm9/7/ Here is the fiddle I am using same in my code.
First of all, clear your float.
EDIT: One of my friend has got real problems with div inside , so lets change this.
<div class="header-box">
<nav>
<ul>
<li>AASD</li>
<li>AASD</li>
<li>AASD</li>
<li style="visibility:hidden;opacity:0;height:0;width:0;clear:both"></li>
</ul>
</nav>
</div>
and the styles:
<style>
.header-box {
width: 400px;
height: 49px;
border: 1px solid green;
position: relative;
}
ul {
margin: 0 auto;
padding: 0;
text-align: center;
height: 100%;
margin: 13px auto;
}
nav li {
float: none;
list-style-type: none;
/* padding-left: 19px; */
/* margin-left: 20px; */
/* line-height: 50px; */
display: inline-block;
/* top: 0px; */
margin: 0 auto;
text-align: center;
}
</style>
Use text-align:center; for centering list's and padding for spaces and line-height for vertically center
FIDDLE
css
nav ul li{
display: inline;
list-style-type: none;
text-align:center;
padding:0 1px;
line-height:49px;
}
Please try this code. Working all Broswer
.header-box{
float:left;
width: 400px;
height: 49px;
border: 1px solid green;
position:relative;
}
.header-box nav {
float: right;
left: -50%;
position: relative;
display:block;
}
.header-box nav ul {
left: 50%;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
nav li{
float: left;
list-style-type: none;
line-height: 50px;
padding:0 10px;
position: relative;
}
Working Demo
use margin: 0px auto;
.header-box{
width: 200px;
height: 49px;
border: 1px solid green;
}
nav li{
float: left;
list-style-type: none;
margin: 0px auto;
}
nav ul li{
float: left;
list-style-type: none;
margin: 0px auto;
padding-left: 19px;
}
nav ul {
width : 100%;
position:relative;
float:left;
margin-left:-25px;
}
nav li{
position:relative;
float: left;
margin-left:10px;
list-style-type: none;
}
Replace the CSS with following..
.header-box{
width: 400px;
height: 49px;
border: 1px solid green;
}
nav ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
nav li{
display:inline;
}
THANKS
DEMO
.header-box{
width: 400px;
border: 1px solid green;
text-align:center;
}
nav ul{
padding:0;
}
nav li{
list-style: none;
display:inline-block;
margin-right: 10px;
vertical-align: middle;
}
Please update your css with below code which is with less modification :
.header-box{
width: 400px;
height: 49px;
border: 1px solid green;
text-align:center;
}
nav{
display:inline-block;
}
nav ul{
padding-left:0;
}
nav li{
float: left;
list-style-type: none;
padding-left: 10px;
padding-right: 10px;
}
nav ul li{
float: left;
list-style-type: none;
margin: auto;
padding-left: 20px;
position: relative;
}
Related
I tried many ways to center all navigation buttons, I'm using text-align: center but it doesn't help because one of my buttons is an image and has greater height and width. I also had to resize the image because it was way too big.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
background-color: white;
height: auto;
width: inherit;
margin-bottom: 0.5em;
border-top: 0px;
border-bottom: 2px;
border-left: 0px;
border-right: 0px;
border-style: inset;
border-width: auto;
border-color: red;
}
nav ul {
list-style-type: none;
overflow: auto;
}
nav ul li {
float: left;
margin-right: 20px;
height: auto;
width: auto;
margin: 10px;
text-align: center;
}
nav ul li a {
text-decoration: none;
display: table;
width: 100%;
height: 100%;
}
<header>
<nav>
<ul>
<li>
<img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px">
</li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>
You can apply display: inline-block; to the li elements (remove all float: left) and text-align: center to the ul, which centers the li s inside the ul:
If you want the two text li vertically centered to the image li, add vertical-align:middle; to the lis
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
background-color: white;
height: auto;
width: inherit;
margin-bottom: 0.5em;
border-top: 0px;
border-bottom: 2px;
border-left: 0px;
border-right: 0px;
border-style: inset;
border-width: auto;
border-color: red;
}
nav ul {
list-style-type: none;
text-align:center;
}
nav ul li {
display: inline-block;
margin-right: 20px;
margin: 10px;
text-align: center;
vertical-align:middle;
}
nav ul li a {
text-decoration: none;
}
<header>
<nav>
<ul>
<li>
<img src="http://placehold.it/80x80/fda" alt="mylogo" style="width: 100px;height: 100px">
</li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>
I think this is a nice case for using a simple flex. Set the container (nav ul) to display: flex and specify that its items have to be center-aligned. Finally, you can also indicate how those list items need to be divided in the available space. In the example below I used justify-content: space-around.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
background-color: white;
height: auto;
width: inherit;
margin-bottom: 0.5em;
border-bottom: 2px inset red;
}
nav ul {
list-style-type: none;
overflow: auto;
display: flex;
align-items: center;
justify-content: space-around;
}
nav ul li {
margin: 10px 20px 10px 10px;
text-align: center;
}
nav ul li:last-child {
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
display: block;
height: 100%;
}
<header>
<nav>
<ul>
<li>
<img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px">
</li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>
To horizontally align center use text-align: center; To vertically align you can use display: table-cell and vertically-align: middle;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
background-color: white;
height: auto;
width: inherit;
margin-bottom: 0.5em;
border-top: 0px;
border-bottom: 2px;
border-left: 0px;
border-right: 0px;
border-style: inset;
border-width: auto;
border-color: red;
}
nav ul{
list-style-type: none;
overflow: auto;
text-align: center;
}
nav ul li{
display: inline-block;
margin-right: 20px;
height: 50px;
width: 100px;
margin: 10px;
text-align: center;
}
nav ul li a {
text-decoration: none;
display: table;
width: 100%;
height: 100%;
}
nav ul li a span{
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
<header>
<nav>
<ul>
<li><span><img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" alt="mylogo" style="width: 40px;height: 40px"></span></li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>
You can use display:inline on your list item and remove your current styling for you a tag as this will force all items to be 100% width of the screen. Also, add text-align:center to your ul and this should center your list:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
background-color: white;
height: auto;
width: inherit;
margin-bottom: 0.5em;
border-top: 0px;
border-bottom: 2px;
border-left: 0px;
border-right: 0px;
border-style: inset;
border-width: auto;
border-color: red;
}
nav ul{
list-style-type: none;
overflow: auto;
text-align:center;
}
nav ul li{
display:inline;
margin-right: 20px;
height: auto;
width: auto;
margin: 10px;
text-align: center;
}
nav ul li a{
text-decoration: none;
}
<header>
<nav>
<ul>
<li><img src="logo.png" alt="mylogo" style="width: 100px;height: 100px"></li>
<li><span>APPS</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</header>
Hope this helps.
Use Flexbox. It's easier than anything and it can center your navigation elements vertically and horizontally at the same time.
nav {
background:#eee;
width:500px;
padding:10px;
box-sizing:border-box;
}
nav ul { /* this is the magical part */
display:flex;
justify-content:space-evenly;
align-content:center;
flex-flow:row wrap;
margin:0;
padding:0;
}
nav li {
list-style:none;
}
nav a {
display:block;
text-decoration:none;
background-color:#ccc;
padding:5px 20px;
}
a.logo {
display:block;
height:30px;
width:25px;
padding:0;
background:url("https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be") 0 -500px #ccc;
}
<nav>
<ul>
<li></li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</nav>
I am trying to create a hamburger menu for when my screen goes below 1025px but for some reason there is a small gap between my nav and my menu div whenever I make the window use the media query. I am not sure why it is there. When I use developer tools I find no margins around either of them.
nav #menu{
position: relative;
z-index: 999;
float: right;
margin: 0 75px 0 0;
line-height: 50px;
}
nav #menu li{
font-family:"Abril Fatface";
display: inline-block;
padding-left: 50px;
}
nav #menu li a{
color: white;
position: relative;
text-decoration: none;
}
nav #menu li a:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 0%;
border-bottom: 2px solid #c1c1c1;
transition: .3s;
}
nav #menu li a:hover:after{
width: 100%;
}
nav #menu li a:hover{
color: #c1c1c1;
}
#media (max-width: 1024px){
.hamburger{
float: right;
cursor: pointer;
padding: 15px;
display: block;
border-left: .1px solid white;
}
.line{
border-bottom: 4px solid white;
width: 35px;
margin-bottom: 5px;
}
.line:last-child {
margin-bottom: 0;
}
nav #menu{
width: 100%;
overflow: hidden;
padding-right: 0px;
margin: 0;
line-height: 25px;
/* height: 0;*/
}
nav #menu li{
display: block;
width: 100%;
background-color: black;
}
nav #menu li a{
width: 100%;
}
.open{
height: auto;
}
Perhaps try specifying:
nav {
margin: 0 auto;
}
I have a menu on wordpress that I'm trying to center, but it wont center itself. If I put auto on margin it doesn't do anything but when a fixed number is set, it does, but it doesn't align perfectly unlike using auto.
CSS
.menu {
width:auto;
float: left;
display:block;
}
#navcontainer {
display:inline;
padding:0px;
margin: 0px; /*-8px 0 0 10px;*/
list-style:none;
position:relative;
z-index:1;
float:left;
height: 20px;
width: 100%;
}
HTML
<section class="twelve columns text-center" style="background: transparent;">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg">
</div>
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></div>
</section>
HI now replace two css in your style sheet
#navcontainer {
float: none;
display: block;
list-style: none;
position: relative;
z-index: 1;
height: 20px;
width: 100%;
text-align: center;
}
.menu {
width: auto;
float: none;
display: inline-block;
text-align: left;
}
Try this in your css and your ul menu set center of #navcontainer with margin auto
change css as per follow:
.menu {
width: auto;
float: none; /*set this to float:none*/
display: inline-block; /*set this to display:inline-block*/
margin-left: auto;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
margin-left: 0px;
overflow: hidden; /*add this to your css*/
}
#navcontainer ul li a{
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
I have a horizontal menubar, and having an issue with the sub-menus. I want the sub-menus to have the same width with their headers(top li?).
Fiddle
I know one way to solve the problem, by giving fixed width to top li elements, but I don't want that. I want each category to have its own width. Is there an alternative way to fix this?
<div id="header">
<div class="container">
<div class="menu-container">
<ul id="menu">
<li>Home</li>
<li>aaaaaaaaaa
<ul>
<li>blabla</li>
<li>bla bla</li>
<li>blabla bla</li>
</ul>
</li>
<li>bbbbbbbbbb
<ul>
<li>blabla</li>
<li>bla bla blabla</li>
</ul>
</li>
<li>cccccccc
<ul>
<li>bla</li>
</ul>
</li>
<li>ddddd</li>
</ul>
</div>
</div>
</div>
<div id="content" class="wrapper"></div>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
body {
background: rgb(36,36,36);
font: normal 100% Arial, Verdana, sans-serif;
}
#header {
background: rgb(16,16,16);
border-top: 3px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
z-index: 100;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
.menu-container {
display: table;
margin: 0 auto;
}
#header ul {
padding: 0;
margin: 0;
list-style: none;
background: rgb(16,16,16);
}
#header ul li {
height: auto;
text-align: center;
width: 130px;
}
#menu {
overflow: auto;
z-index: 100;
width: 665px;
margin: 0 auto;
}
#menu a {
display: block;
padding: 20px;
font-size: 18px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
text-decoration: none;
color: WhiteSmoke;
border-right: 1px solid #1d1d1d;
}
#menu a:hover {
color: white;
background: rgb(50,50,50);
}
#menu > li {
float: left;
}
#menu > li.active {
background: rgb(50,50,50);
}
#menu li:nth-child(1) {
border-left: 1px solid rgb(32,32,32);
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
display: none;
z-index: 100;
width: auto;
position: absolute;
}
#menu li ul a {
padding: 10px 0;
}
#menu li ul li {
border-left: 1px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
font-size: .8em;
}
#menu li ul li:nth-child(1) {
border-top: 1px solid rgb(32,32,32);
}
.wrapper {
width: 100%;
min-height: 500px;
overflow: auto;
background: rgb(36,36,36);
border-top: 1px solid rgb(55,55,55);
}
I applied these styles on top of your styles and they seem to have done what you want. (non-fixed width top menu where second layer scales to width of thing above it).
.menu-container { }
.menu-container #menu { width: auto; overflow: visible; height: 60px; }
.menu-container #menu li { position: relative; display: block; width: auto; }
.menu-container #menu li ul { display: none; width: 100%; }
.menu-container #menu li:hover ul { display: block; }
.menu-container #menu li ul li { display: block; width: 100%; }
Here's the fiddle with modified code: http://jsfiddle.net/3zj6E/1/.
The following CSS rule sets were changed:
#menu {
overflow: auto;
z-index: 100;
display: table;
margin: 0 auto;
}
#menu > li {
float: left;
position: relative;
}
#menu li ul {
display: none;
z-index: 100;
position: absolute;
width: 100%;
}
I am just asking for your guys help on getting a vertical navigation bar, It's hard to find help over the internet when it's such a specific problem so any answers will be appreciated... this is for the media query at 480 x 800.
#media screen and (min-width:480px) and (max-width:800px){ #header{ height:100px; width:480px; } #nav{ padding: 15px; } #nav li ul{ list-style-type: none; padding: 15px; margin-left: 0; border-right:none; } #nav li a{ text-decoration: none; background-color: #ffffff; display: block; width: 8em; border-bottom:1px solid #eb322c; padding: 15px; }
change media Query css with this css
#media screen and (min-width:480px) and (max-width:800px){
#header{
height:100px;
width:480px;
}
#nav{
padding: 5px;
position: absolute;
left: 0px;
width: 150px;
}
#nav ul {
padding: 5px;
border-left: 1px;
text-align: center;
width: 150px;}
#nav li ul{
list-style-type: none;
padding: 15px;
margin-left: 0;
border-right:none;
}
#nav li a{
text-decoration: none;
background-color: #ffffff;
display: block;
width: 8em;
border-bottom:1px solid #eb322c;
padding: 15px;
}