Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27737
    Alexa Dietrich
    Guest

    I have been trying to center the site logo on the Grid One theme.

    I have tried using the supplied customization setting however, it does not get it centered.

    I have been attempting to use the custom CSS feature, however, nothing I do seems to work.

    .site-branding {
    text-align: center;
    margin: 0px auto;
    }
    .site-logo {
    text-align: center;
    margin: 0px auto;
    }

    Does not work.

    I have been going to each parent div to add text-align: center

    However, none of that works. No floats, no text-aligns, no margins. I am at my wits end.

    It centers on mobile and tablet views just fine. Just not desktop.

    #27784
    Jesse Owens
    Keymaster

    Hello Alexa-

    The reason this is working on mobile and not desktop is because on larger screens, there are actually two columns in the row that contains your logo. Out-of-the-box, this is the column that contains your Social Media menu.

    If you’d like to get complete control over your header design, I’d recommend checking out the Crio SuperTheme, but if you’d like to stick with Grid One, here’s how you can accomplish this.

    First, we’ll need to use Custom JavaScript to remove the second column, and then modify the first column to take up the full width of the page. Paste the following code into your Custom Theme JS field:

    jQuery('div.row.header-7').children('div.header-7').remove();
    jQuery('div.row.header-6').children('div.header-6').removeClass('col-md-6').addClass('col-md-12');

    Then, modify your Custom Theme CSS to match this:

    .site-branding, .site-title {
      text-align: center;
      margin: 0px auto;
    }
    #27785
    Alexa Dietrich
    Guest

    That was a perfect response.

    Thank you.

    #27798
    Jesse Owens
    Keymaster

    Thanks Alexa!
    Let us know if you have any more questions, we’re happy to help.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘How to center the logo on the Grid One Theme’ is closed to new replies.