WordPress.org

Forums

Vantage
[resolved] Center the "Vantage" logo (5 posts)

  1. kgibson90
    Member
    Posted 1 year ago #

    Hello,

    I did a quick search and did not find this topic. If it's been written and you could direct me to, that would great!

    I was wondering if it was possible (whether selecting it or writing css) to center the logo at the top of the page. My client, as it were, would like to see the his company logo larger and in the center at the top of the page.

    Is it possible to do this?

    Thanks in advance!

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  3. kgibson90
    Member
    Posted 1 year ago #

    That worked!

    Thank you so much!

  4. gmsiegel
    Member
    Posted 9 months ago #

    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 */
  5. Misplon
    Member
    Posted 9 months ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.