-
Posts
-
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.
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; }That was a perfect response.
Thank you.
- The topic ‘How to center the logo on the Grid One Theme’ is closed to new replies.
