I want the elements of a navbar to be on the center, I have the following html:
<div class="navbar navbar-default navbar-fixed-bottom" style="bottom:50px; background:none; border:0px; box-shadow:none;">
<div class="navbar-inner" style="float: none;">
<div class="container-fluid" >
<ul class="nav navbar-nav" >
<li><img class="social-media" src="images/facebook.png"></li>
<li><img class="social-media" src="images/twitter.png"></li>
<li><img class="social-media" src="images/linkedin.png"></li>
</ul>
</div>
</div>
</div>
and here is my css:
.social-media {
opacity: 0.4;
margin-left: 15px;
width: 32px;
height: 32px;
}
.social-media:hover {
opacity: 1;
margin-left: 15px;
width: 32px;
height: 32px;
}
I tried to use text-align:center; on navbar inside the html but it didnt work. Any idea how can I solve this?
I've tried to change the bootstrap.css to
#media (min-width: 768px) {
.navbar-nav {
float: none;
margin: 0 auto;
float: none;
width: 100%;
}
.navbar-nav > li {
float: none;
text-align: center;
}
and now I have this:
after editing bootstrap.css to :
.navbar-nav {
margin: 0;
display:inline-block !important;
float:none !important;
}
I finally got:
i think you need to set the float:none; on UL and text-align:center; on parent of UL
try the below css on UL and
*remember I am considering bootstrap 2.3.2 version NOT v3.X (if any not sure) if u are using other version let me know.. *
.navbar-nav {
display:inline-block !important;
float:none !important;
}
.container-fluid {
width: 100%;
text-align:center;
}
check the below bootstrap sample
If you have set .navbar-nav li as inline-block, add text-align:center to .navbar-nav, this will position your icon in the center of navabar.
.navbar-nav{
text-align:center;
}
.navbar-nav li{
display:inline-block;
}
Try this:
.navbar-nav {
width: 100px;
margin: 0 auto;
}
.container-fluid {
width: 100%;
text-align: center;
}
By setting the left and right margins to auto, you are telling it to make both margins the same, which will center it. Do not remove the text-align: center.
Related
I'm trying to get a website up and I'm using CSS to get it designed but I am unfamiliar with navbars and getting stuff side by side. I used a "float: left" for my image (logo) and well the text aligned but, it seems like I cannot fully click on the image anymore since it's also something that can be clicked using the tag. So, any ideas? My code:
CSS:
#navbar {
width: 100%;
height: 40px;
background-color: black;
opacity: 0.7;
display: fixed;
}
#navbar img {
opacity: 1;
float: left;
}
#navbar img:hover {
opacity: 0.7;
}
#navbar img a
{
margin: 0;
padding: 0;
}
#navbar ul
{
position: relative;
list-style-type:none;
margin:0;
padding: 8px 0 0 0;
color: white;
font-size: 1.5em;
}
#navbar ul a
{
display:block;
width:60px;
}
#navbar li
{
display:inline;
}
HTML:
<div id="navbar">
<img src="logo.png"/>
<ul> <li>Hello</li> <li>World</li>
</ul>
</div>
Hi Please see the below html and css
HTML:
<div id="navbar">
<ul>
<li><img src="logo.png"/></li>
<li>Hello World</li>
</ul>
</div>
CSS:
#navbar {
width: 100%;
height: 40px;
background-color: black;
opacity: 0.7;
}
#navbar img {
opacity: 1;
}
#navbar img:hover {
opacity: 0.7;
}
#navbar img a
{
margin: 0;
padding: 0;
}
#navbar ul li
{
list-style-type:none;
margin:0;
padding: 8px;
color: white;
font-size: 1.5em;
}
#navbar ul li
{
display:inline-block;
}
Please check the jsfiddle: http://jsfiddle.net/Luncqwn3/3/
I have cleaned up your html and css
I have placed the logo ,as well as the text in the ul li and given
display:inline-block which will make them appear next to each other
in a single line.
Please try using hexadecimal codes for color like #000 or #fff
instead of specifying white,black,green etc.
There is no such thing as display:fixed, please see w3schools
site for better understandong.
I removed float:left for the img tag , because i achieved
bringing the logo and text next to each pther using
display:inline-block for the ul li.
JSFiddle
HTML
<div id="geometric-nav" class="left template-column cfix template-column-2" sort_key="nav">
<div class="geometric-nav-wrap cfix" style="
">
<ul id="geometric-nav-links" class="nav-links expandable">
<!-- page links are appended to this element -->
<li class="page page-896547 page-work" page_id="896547" nav-link="true" nav_link_tmpl="true" style="display: none;">
<div class="nav-link-container">
Gallery</div></li><li class="page page-896549 page-custom first-child" page_id="896549" nav-link="true" nav_link_tmpl="true">
<div class="nav-link-container">
About</div></li><li class="page page-896548 page-custom last-child" page_id="896548" nav-link="true" nav_link_tmpl="true">
<div class="nav-link-container">
Contact</div></li><li class="page page-896551 page-resume" page_id="896551" nav-link="true" nav_link_tmpl="true" style="display: none;">
<div class="nav-link-container">
Resume</div></li></ul>
</div> <!--#geometric-nav-wrap-->
</div>
CSS
#geometric-nav {
background: #222;
height: 40px;
width: 100%;
margin-top: 10px;
}
.template-column-2 #geometric-nav-links li {
margin-left: 15px;
float: left;
list-style: none;
}
This solution treats the li items as inline-block elements and uses the ul container to center the elements.
added:
text-align: center
to #geometric-nav
and
display: inline-block
to .template-column-2 #geometric-nav-links li
http://jsfiddle.net/gZB6Y/
google would have helped you ;)
You can use :table; for ul and reset margin to auto; it will shrink on it's content and will center:
.template-column-2 #geometric-nav-links {
display:table;
margin:auto;
}
DEMO
Or set display:inline-block to li and text-align:center to ul
DEMO 2
.template-column-2 #geometric-nav-links li {
margin-left: 15px;
display:inline-block;
list-style: none;
}
.template-column-2 #geometric-nav-links {
text-align:center;
}
Or set display:inline-block to ul and text-align:center to #geometric-nav.
DEMO 3
#geometric-nav {
background: #222;
height: 40px;
width: 100%;
margin-top: 10px;
text-align:center;
}
.template-column-2 #geometric-nav-links li {
margin-left: 15px;
float: left;
list-style: none;
}
.template-column-2 #geometric-nav-links {
display:inline-block;
}
I've the following:
HTML (partial):
<div id="page">
<div id="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- how many <li>s as need -->
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
min-height: 100%;
}
#page {
position: absolute;
right: 0;
width: 97%;
height: 100%;
overflow-y: auto;
text-align: center;
}
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: inline-block;
overflow-x: hidden;
}
#header #logo {
float: left;
}
#header #menu ul {
list-style-type: none;
}
#header #menu ul li {
height: 2em;
line-height: 2em;
}
#content {
position: relative;
margin: 20px auto 0 auto;
width: 95%;
}
#footer {
position: relative;
margin-top: 20px;
width: 100%;
height: 260px;
}
Explaining:
There is a container div (#page). Within it there are #header, #content and #footer.
#header space is split horizontally between #logo and #menu.
The problem:
I need to position #menu at bottom of #header but yet at side of #logo. I'm not getting it without break layout. How can I do this?
When new menu items be added, they should make menu go up, not down, this is why I need to do what I said above. The fist image below illustrates how I want to do and second how it actually is (lighter parts are within the darker and yes, it is a mobile layout):
First Image:
Second Image:
And please, no JavaScript, just pure CSS.
Thanks for attention, bye.
try changing display property of the #header to table, display of the #logo and #menu to 'table-cell' and verticaly align them to the bottom - it should do what you need
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: table;
overflow-x: hidden;
}
#logo {
display:table-cell;
vertical-align:bottom;
}
#menu {display:table-cell; vertical-align:bottom;}
selector in your css #header #logo is too much because identifiers cannot duplicate so #logo is really enough
here is working example: http://jsfiddle.net/6xBvR/1/
Add position:absolute; and bottom:0px; to #header #logo:
#header #logo {
float: left;
position: absolute;
bottom: 0px;
}
Should fix your problem. You could also truncate #header #logo to just #logo.
I wouldn't use float, I'd use display:inline-block and vertical-align:bottom
#logo {
display: inline-block;
vertical-align:bottom;
}
#menu {
display: inline-block;
vertical-align:bottom;
}
But you will need to set some widths.
I alos needed to remove padding from the ul
#menu ul {margin-bottom:0px}
Example: http://jsfiddle.net/pLeUD/
i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page.
i tried margin:0 auto but it wont work
here is my code:
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</div>
Change your last two CSS rules to:
li {
display:inline-block;
}
#menu {
background-color:#98bf21;
text-align:center;
}
jsFiddle example
margin: 0 auto; only works on items that have defined widths. However, the way you currently have it written, each a tag is attempting to center, when you really want to center the ul. Here is a great way to center that when you don't know the width of your ul. Use these styles in your header, ul and li elements. Add styling to your a tags to suit.
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}
What's going on here is we're setting the header to full width, and then pushing the ul half way across the width of the browser. Then we push the li's back half the width of the ul, which now centers them on the page.
Here is a link with a very helpful tutorial about doing this very thing: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Good luck!
Use the inline-block css magic :)
JSFiddle
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}
I had the same problem until I read this post and decided to center the text in the "nav".
So basically your ul should be in a nav so you can text-align: center the nav area.
nav {
width: 75%;
margin: auto
}
#menu {background-color: #98bf21}
.container{padding: 0.10em}
.cell-row {display:table; width:100%}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
a:link, a:visited {
font-weight: bold;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {background-color: #7A991A}
#media (max-width: 500px) {
.mobile {
display: block;
width: 100%;
text-align: center
}
nav {
width: 100%;
margin: auto
}
}
<nav>
<div id="menu" class="cell-row" style="text-align: center">
<div class="container cell cell-middle mobile">Home</div>
<div class="container cell cell-middle mobile">News</div>
<div class="container cell cell-middle mobile">Articles</div>
<div class="container cell cell-middle mobile">Forum</div>
<div class="container cell cell-middle mobile">Contact</div>
<div class="container cell cell-middle mobile">About</div>
</div>
</nav>
Add the following css:
ul {
margin: 0 auto;
display: inline-block;
}
This will make the ul fit its contents and then be centered in its container.
I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out:
Snow Candy <-
This is the HTML that I've got:
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
<div id="content">
<h1>Header One</h1>
</div>
This is the CSS I've got:
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#header{
float: right;
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}
#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}
Ok, Henry.
I added some code into the css - http://jsfiddle.net/JET4v/2/
Also added wrapper to keep it all in control.
This basically says that there wont be anything beside #header and
#content
Also #header #header h1 #header #nav #content will all be
floated to the left.
And #wrap basically centers itself.
#wrap { margin: 0 auto; width: 700px; }
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
Note that you might want to add width and height values too, but not height to the #content of course.
And if you want to use #wrap you should know that it should be the width of your widest element(s)