How to center the logo and menu bar?

[John]

Our logo is currently left justified and the menu bar is right justified. How do you center both?

[John]

btw – using the elb theme

[7Theme Support]

Hi,

you can do that with some line of CSS code. Please add this to your style.css file:

.element-logo, .element-Menu {
display: block !important;
clear: both !important;
float: none !important;
text-align: center;
margin: 10px auto !important;
}
#header {
padding-top:1px;
}

PLEASE NOTE: customizations are not included for free support. If you give you some CSS code it is without warranty, especially for responsive design.

[John]

Thank you very much for your prompt reply. I added the code to the bottom of the style.css file and updated it successfully. There is no change in the appearance of the page after I refreshed it (the logo is still left justified and the menu is right justified.) Could there be some other code in the file that is overriding this new code? I saw some other coding referencing the logo and and menu but did not know how to adjust them. Here is the current file with the code you supplied on the bottom:

/*
Theme Name: Elb
Description: Elb Theme from 7Theme
Author: 7Theme.net
Author URI: http://www.7theme.net/
Version: 1.01
License: Its Located in the license folder
License URI: Its Located in the license folder
Theme URI: http://www.web-rockstars.com/elb/
Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header
*/

@import “style/default.css”;

/* Generated Styles: */
.inner {
max-width:1100px;
}

body {
padding-top: 1px;
cursor: auto;
background-color: rgb(28, 28, 28);
}

#page {
max-width: 100%;
margin-top: 50px;
margin-left: 50px;
}

#overheader > .inner {
min-height:30px;
}

#header {
position: relative;
}

#header > .inner {
min-height:30px;
}

#logo_1_container {
z-index: 99;
position: relative;
display: block;
float: left;
clear: none;
}

#menu-main_container {
margin-top: 50px;
display: block;
float: right;
clear: none;
margin-bottom: 50px;
}
#menu-main_container ul#menu > li > a {
margin-bottom:20px;
margin-top:20px;
}
#custom-header_info_container {
display: block;
margin-top: 100px;
margin-bottom: 100px;
clear: both;
float: none;
text-align: left;
font-size: 33px;
}

#element-slider {
display: block;
}

#head_line > .inner {
min-height:30px;
}

#main > .inner {
min-height:30px;
}

#content {
display: block;
}

#footer {
border-top:1px solid;
margin-top:50px;
}

#footer_container {
display: block;
}

#logo_container {
z-index:99;
position:relative;
}

#menu_container {
margin-top:30px;
}

/* Classes styles*/
#header {
position: relative;
}
#cycle_container {
max-height:100%;
}
.sidebar .widget-title {
font-size: 27px;
}
.team_entry_div {
text-align:center;
}
.portfolio_shortcode_container {
position:relative;
}
.portfolio_shortcode_image {
position:relative;
}
.portfolio_shortcode_title {
font-size: 27px;
}
.post_shortcode_container {
position:relative;
}
.post_shortcode_image {
position:relative;
}
.post_shortcode_title {
font-size: 27px;
}
.post_container {
position:relative;
}
.post_title {
font-size: 27px;
}
.post_image {
position:relative;
}
.mainsection h1 {
font-size: 37px;
}
.mainsection h2 {
font-size: 33px;
}
.mainsection h3 {
font-size: 27px;
}
.mainsection h4 {
font-size: 23px;
}
.mainsection h5 {
font-size: 20px;
}
.mainsection h6 {
font-size: 18px;
}
#footer {
border-top:1px solid;
}
#footer .widget-title {
font-size: 22px;
}
.scroll_top {
text-align:center;
}
.scroll_top_button {
position:relative;
display:inline-block;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.3);
}
/* BEGINN SIDEBAR */
#page-sidebar-right #content , #page-sidebar-left #content {
width:820px
}
.sidebar {
width:280px;
}
.mega_headline h2, #content .mega_headline h2 {
font-weight:normal;
}
.page article.type-post, .archive article.type-post {
background:#f5f5f5;
}
.page article.type-post .pcontent, .archive article.type-post .pcontent {
padding:50px;
}
/* Center logo and menu */
.element-logo, .element-Menu {
display: block !important;
clear: both !important;
float: none !important;
text-align: center;
margin: 10px auto !important;
}
#header {
padding-top:1px;
}

[7Theme Support]

Normally it should work. Have you deleted your browser cache? Can you send us the link to your website, then we can take a look at it

[Author]

Posts