Try this in theme’s custom CSS option if provided. If not, install a Custom CSS plugin.
body.responsive header#masthead hgroup { text-align: center; }
body.responsive header#masthead hgroup .logo { float: none; }
body.responsive header#masthead hgroup .logo img { margin: 0 auto; }
body.responsive header#masthead hgroup .support-text,
body.responsive header#masthead hgroup #header-sidebar {
display: block;
margin-top: 30px;
max-width: 100%;
position: static;
}
The above are actually taken from theme’s small screen media query. When declare later (after) theme’s main stylesheet, it will override theme’s big screen version. So we get the center aligned header elements like it does in small screen.
I’m trying to do the same thing, but paulwpxp’s code didn’t work. I’m using a child theme of Vantage and posted the style.css for this child theme below.
I’m trying to center the banner logo on this page:
http://www.deercreeksoccer.net/
Thanks in advance.
[CSS]
/* Header section */
header#masthead hgroup {padding-bottom:12px;padding-top:12px;}
header#masthead {background:#fff;}
/* .main-navigation {background:#0C3893;} */
.full-container .menu a {height:24px !important;padding-top:3px !important;padding-bottom:6px !important;}
/* Center the banner logo */
header#masthead hgroup .logo {float: none; margin: 0 auto; display: table;}
/* End Center the banner logo */
/* End Header section */
/* Center images */
img.centered {display: block;margin-left: auto;margin-right: auto;}
/* End Center images */
/* Main body section */
#main {background:#fff;}
/* End Main body section */
/* Remove box shadow from images */
.entry-content img {-webkit-box-shadow:none;box-shadow: none;}
/* End remove box shadow from images */
/* Slider section */
/* previously blue bg color {background: #0C3893} */
#main-slider {background-image:url('/wp-content/uploads/grassbg.jpg');}
/* End Slider section */
/* Main BG Image */
/* NOT USED
#main {background-image:url('/wp-content/uploads/bg2.jpg');} */
/* End */
/* Minimum height in main section to avoid tall footer */
#main.site-main {min-height:400px;}
/* End */
/* Sponsor table page */
table.sponsor {background:#2f3033;-moz-border-radius: 15px;border-radius: 15px;}
td.sponsor {padding: 30px;}
/* End Sponsor table page */
/* Footer section */
.layout-full #colophon {height:auto;padding:9px;margin-top:auto;text-align:center!important;}
#colophon #theme-attribution {margin-top:0;}
/* Sponsor horizontal slideshow */
div.container .footer {width:3000px;display:table;overflow:hidden;}
#sponsor_gallery a { padding: 50px;}
/* End Sponsor horizontal slideshow */
/* End Footer section */
/* Consistent fonts across all elements */
body, button, input, select, textarea {font-family: Tahoma, sans-serif;}
/* End fonts */
Hi gmsiegel
In a recent Vantage update hgroup was changed from a tag to a div class so it needs a period in front of it. Try the following in a child theme stylsheet or a Custom CSS plugin. If it doesn’t work please try it without any of your other selectors, if that works, add in your CSS one selector at a time.
(Logo centering is a a feature of Vantage Premium in the Customizer).
/* Vantage Center Logo */
header#masthead .hgroup .logo {
float: none !important;
}
header#masthead .hgroup .logo img {
display: block;
margin: 0 auto;
}
