WordPress.org

Ready to get started?Download WordPress

Forums

Matala
[resolved] How do I center the menu? (5 posts)

  1. randomcharlie
    Member
    Posted 1 year ago #

    Just want to know, how do i center the menu bar? It's driving me crazy! I'm going through the style.css, but nothing is working. Help please?

    Thanks!

    - Charlotte

  2. Tareq
    Member
    Posted 1 year ago #

    In your custom css or Child Theme.

    #access {
    	float: none;
    	display: table;
    	margin: 0 auto;
    }

    Be wary that this Theme was last updated over two years ago so it's compatibility with the latest release of WordPress could be questionable.

  3. Tareq
    Member
    Posted 1 year ago #

    Oh and you may want to have a play around with the paddings/margins to align it properly with the rest of your site.

  4. randomcharlie
    Member
    Posted 1 year ago #

    I've tried what you suggested and still no cigar. I just want the menu to be centred no matter how many pages are added. The website is kabarker.com.au/blog

    Here is the code from style.css

    Thanks for your help!

    /* =Main Navigation
    -------------------------------------------------------------- */
    
    #access {
            float: none;
            display: table;
            margin: 0 auto;
    	}
    
    }
    .attachment #access {
    	background: url("images/bg-menu-1col.png") no-repeat;
    	width: 1000px;
    
    }
    #access ul {
    	font: 15px Georgia, "Times New Roman", serif;
    	list-style: none;
    
    	-webkit-transform: rotate(1deg);
    	-moz-transform: rotate(1deg);
    }
    #access li {
    	float: left;
    	position: relative;
    
    }
    #access a {
    	color: #4f98b7;
    	display: block;
    	font-weight: bold;
    	line-height: 3;
    	padding: 0 13px 5px;
    	text-decoration: none;
    
    }
    #access ul ul {
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	position: absolute;
    	top: 25px;
    	left: 0;
    	margin-left: 0;
    	z-index: 99998;
    	-webkit-transform: none;
    	-moz-transform: none;
    	min-width: 180px;
    }
    #access ul ul ul {
    	left: 100;
    	top: 0;
    }
    #access ul ul a {
    	background: #e8e0c8;
    	border: 1px solid #dfce8c;
    	color: #000;
    	line-height: 1;
    	margin: 0;
    	padding: 15px;
    	min-width: 180px;
    	height: auto;
    }
    #access li:hover > a {
    	color: #1dc4d8;
    	background: url("images/menu-selected.gif") no-repeat;
    }
    #access ul ul li:hover > a {
    	color: #1dcdd8;
    	background: #c8e6e8;
    	background-position: 0 0;
    }
    #access ul ul a:hover {
    	background: #d4cfc6;
    }
    #access ul li:hover > ul {
    	background: #e2dbd1;
    	display: block;
    }
    #access .current_page_item a {
    	color: #1dd1d8;
    	background: url("images/menu-selected.gif") no-repeat;
    }
    #access li.current_page_item ul ul li a,
    #access li.current_page_item ul li a  {
    	background: #e8e0c8;
    }
  5. randomcharlie
    Member
    Posted 1 year ago #

    Finally fixed it by editing the Header tag. I added text-align:center; and it worked. Thanks for your help!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic