I'm using Weebly to create a website, and I've been trying to modify the navigation bar so that it appears centered rather than left justified. I don't really know any code at all, but I found the navigation code, and I was wondering what I could change to center the bar. Thanks!
#nav-wrap .nav {
float:left;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
background:url(saperator-h.png) repeat-x bottom;
padding-bottom:40px;
}
#nav-wrap .container ul {
list-style: none;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator.png) no-repeat right center;
margin-right: 10px;
padding-right: 25px;
}
#nav-wrap .container ul > li:last-child, #nav-wrap .container ul span:last-child li {
background:none;
}
#nav-wrap .container ul li a {
display: block;
line-height:14px;
border: 0;
outline: 0;
list-style-type: none;
text-transform:uppercase;
padding:5px;
margin-bottom:4px;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color:#000;
}
#nav-wrap {
position: relative;
width: /*set width, can't be 100% obivously if you want it centered */
margin: auto;
}
This is a guess, we don't see any HTML , apply this to whatever is the container for the entire navbar
It depends on the HTML structure, but this could work.
#nav-wrap .container ul {
display:block;
width:auto;
margin:auto;
}
#topnav a {
float: left;
display: block;
color: #fff;
font-size: 1.2em;
text-decoration: none;
padding: 11px 60px 60px 15px;
border: 0;
outline: 0;
text-transform: uppercase;
i had to mess with the padding but this centered my nav bar in weebly
Related
I have created my first master page so bear with me if this is a dumb question. One of my menu drop down lists within the master page is longer than the viewable page, so some of the items in the drop down list are cut off at the bottom of the page. How can I make the drop down list have the ability to scroll through it so I can see the entire list.
nav{
top:0;
left:0;
position:fixed;
width:100%;
background-color:rgba(0,0,0,0.6);
}
nav ul{
float:left;
padding:0;
margin:0;
position:relative;
list-style:none;
}
nav ul li{
display:inline-block;
float:left;
position:relative;
}
nav a{
display:block;
padding:3px 10px;
color:white;
font-size:17px;
font-weight:bold;
text-decoration:none;
font-family:Arial;
}
nav a:hover{
background-color:white;
color:gray;
}nav ul ul{
display:none;
position:absolute;
width:450px;
top:26px;
}
nav ul li:hover>ul{
display:inherit;
}
nav ul ul li{
float:none;
display:list-item;
position:relative;
background-color:rgba(0,0,0,0.6);
}
nav ul ul ul li{
position:relative;
left:450px;
top:-26px;
}
.toggle, [id^=drop]{
display:none;
}
#media all and (max-width:600px){
.menu{
display:none;
}
.toggle{
display:block;
color:white;
background-color:rgba(0,0,0,0.6);
text-decoration:none;
padding:20px;
}
.toggle:hover{
background-color:white;
color:dimgray;
}
#logo{
display:block;
float:none;
}
[id^=drop]:checked+ul{
display:block;
}
nav ul li{
display:block;
width:100%
}
nav ul ul{
float:none;
position:static;
}
nav ul ul ul{
float:none;
position:absolute;
}
}
One option would be to set via CSS a maximum height of the container (max-height : number [%, PX, VH] ) of dropdown and specify an overflow / scrolling (overflow-y : [ scroll|auto ] )to get to the bottom of the items. For example:
.nav ul { max-height:100%; overflow-y: auto; }
You can adjust Max-Height with %, PX, VH .. or whatever suites your specific project's use case.
Another option could be to introduce Columns in the dropdown as described here:
How to fix a dropdown menu that extends past bottom of page
I figured it out. To have a scroll bar in the sub menu drop list I needed to add nav ul ul ul and alter the nav ul ul ul li see below;
top: 0;
left: 0;
position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
nav ul {
float: left;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
}
nav a {
display: block;
padding: 3px 15px;
color: white;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial;
}
nav a:hover {
background-color: white;
color: gray;
}
nav ul ul {
display: none;
position: absolute;
width: 300px;
top: 26px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
float: none;
display: list-item;
position: relative;
background-color: rgba(0,0,0,0.6);
}
nav ul ul ul {
display: none;
position: absolute;
left: 300px;
top: 0px;
max-height: 1000%;
overflow-y: auto;
}
nav ul ul ul li {
float: none;
display: list-item;
position: relative;
}
.toggle, [id^=drop] {
display: none;
}
#media all and (max-width:600px) {
.menu {
display: none;
}
.toggle {
display: block;
color: white;
background-color: rgba(0,0,0,0.6);
text-decoration: none;
padding: 20px;
}
.toggle:hover {
background-color: white;
color: dimgray;
}
#logo {
display: block;
float: none;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%
}
nav ul ul {
float: none;
position: static;
}
nav ul ul ul {
float: none;
position: absolute;
}
}```
I have a header with 2 divs, the first one (floating to the left) is a simple horizontal unordered horizontal list, which is properly centered vertically (header has line-height the same as it's height and vertical-align: middle). The second div is floating to the right, and it also has a horizontal unordered list, however it has round (border-radius: 50%) hyperlinks and no text in them at all (they are going to be used as icons, with background-image).
While the first div is aligned properly no matter what is the size of header, the second one stays at the top.
My code:
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #icons
{
float: right;
}
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
You can check the code & results here:
https://jsfiddle.net/mf6yg78f/
How can I vertically align the round list elements? I'd prefer to stay away from any flexboxes etc.
Give margin-top: 7px; to #header #icons. There is no other option.
body
{
margin: 0;
padding: 0;
background-color: black;
}
#wrapper
{
width: 80%;
background-color: white;
margin: auto;
}
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #links
{
float: left;
}
#header #links ul
{
margin: 0;
padding: 0;
}
#header #links ul li
{
list-style-type: none;
display: inline-block;
}
#header #links li:before
{
content: " | ";
}
#header #links li:first-child:before
{
content: none;
}
#header #links ul li a
{
text-decoration: none;
color: inherit;
}
#header #links ul li a:hover
{
color: red;
}
#header #icons
{
float: right;
margin-top: 7px;
}
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li:first-child ~ li
{
margin-right: 10px;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
<body>
<div id="wrapper">
<div id="header">
<div id="links">
<ul>
<li>Index</li>
<li>Login</li>
<li>Gallery</li>
</ul>
</div>
<div id="icons">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
If you don't want to use flex, then try to display items as table and table cell so that it will behave as table. display:table-cell will make the element behave as <td> and so you can add vertical-align: middle to it effectively
try changing the following style to:
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
height: 50px;
display: table;
float: right;
}
#header #icons li
{
list-style-type: none;
display: table-cell;
text-align: right;
vertical-align: middle;
width: 35px;
padding-right: 10px;
}
#header #icons ul li a
{
display: block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
margin: auto 0;
float: right;
}
I've been trying to center the content which contains ul pagination. The margin-left and margin0right only center the div, but text-align: center won't center the content inside.
Here's the code:
CSS
/* Pagenation */
.article .pagelinks { text-align: center !important; display: table; margin-left: auto; margin-right: auto; width: 240px; position: relative; overflow: hidden; padding: 0; clear: both; }
.article .pagelinks ul { list-style:none; text-align: center; margin: auto; padding: 0; }
.article .page-numbers li {display:inline;}
.article .page-numbers li a {display:block; float:left; padding:4px 9px; margin-right:7px; color: #911d23;}
.article .page-numbers li span.current {display:block; float:left; padding:4px 9px; margin-right:7px; background-color: #fff; color: #911d23;}
And here's the link to the web page in question: http://disa.com.sv/constructora/?page_id=10&paged=2.
How do I get it to text-align center or center things?
try this :
.article .page-numbers li{display:inline-block}
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
I am in the process of creating a site using wordpress. (It can be seen here: http://www.adp-design-demos.com/brolim2/) However, the menu aligns with the side of the browser, rather than the content of my wordpress site. I have been through the CSS, and know where the menu CSS is, but at the moment all I've managed to do is move it by percentage.
Can anyone help me with the coding so that the menu appears in a fixed position regardless of window/browser size and location.
Cheers
The area I have been editing:
#header .nav {
background: #E0DCD9 url('images/bg_nav.png') repeat-x;
overflow: hidden;
}
#header .nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header .nav li {
float: left;
}
#header .nav li a {
display: block;
padding: 12px 18px 13px 18px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
#header .nav li ul {
margin: 0;
padding: 0;
position: absolute;
margin-top: 26px;
}
#header .nav li li a {
font-size: 11px;
padding: 0;
margin: 0 0 0 20px;
}
#header .nav li li {
width: auto;
display: inline;
float: none;
}
#header .nav li li a:hover {
background: none;
}
#header .nav li a:hover, #header .nav .current_page_item a {
background: #4B3F33;
color: #fff;
}
#header .nav li ul {
display: none;
}
#header .nav .current_page_item ul {
display: block;
position: absolute;
left: 652px;
}
#header .nav .current_page_item ul li a {
background: none;
color: #666;
}
.nav_categories {
background: #f58220;
background-position: top center;
overflow: hidden;
}
.nav_categories ul {
width: 1000px;
margin: 0 auto 0 auto;
}
.nav_categories a {
display: block;
padding: 15px;
align: center;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
.nav_categories li {
float:right;
position:relative;
left:-42%;
text-align:left;
}
.nav_categories .current-cat a, .nav_categories a:hover {
color: #4b3f33;
}
At first glance the alignment of your navigation looks correct (even after resizing). I looked at the demo site and inspected the html as well. I couldn't find .nav within #header. Can you provide me with the html you're working with?