What CSS do I use to center the logo, title, and tagline on my site?
-
I’m using the Motif Theme. My title, tagline, and logo are all left justified. How do I center them? What CSS do I need to add to make that happen?
The blog I need help with is: (visible only to logged in users)
-
Hi!
You should be able to do that using the code below:
.site-branding { text-align: center; } .site-logo { margin: 0px auto; }Can you place that under Appearance -> Customize -> CSS?
Also, in case you’re interested in learning more about CSS, we have some awesome resources linked here:
https://en.support.wordpress.com/custom-design/custom-css/#css-help
-
Thanks so much! This worked perfectly. I’ve tried searching through the resources, but I can never seem to find the CSS code that corresponds to what I want the page to look like.
-
-
One last question, how do I center the menu bar? Right now it’s left aligned. I searched through and found questions about this for other themes, but not for my theme. I tried pasting the CSS recommended for other themes but it didn’t work.
-
-
One last question, how do I center the menu bar?
That was a bit trickier! This should work. Can you place the full code under Appearance -> Customize -> CSS?
ul#menu-beckett-menu.menu.nav-menu { text-align: center; } .main-navigation li { display: inline-block; } @media only screen and (max-width: 480px) { .main-navigation li { display: inline; } }The last bit fixes the menu on mobile devices (About Us and News were appearing on the same line).
-
I pasted the code there but the menu options (About Us, Contact Us, and News) remain left aligned within the menu bar. Is there a way to make them centered within the menu bar?
I apologize for all the questions. I’m just trying to center everything on the page. This is my last question, I promise.
-
It seems like I removed a crucial element in my attempt to minimize the CSS. Sorry about that! Can you replace my failed attempt with this? float: none was the missing culprit.
ul#menu-beckett-menu.menu.nav-menu { text-align: center; } .main-navigation li { float: none; display: inline-block; } @media only screen and (max-width: 480px) { .main-navigation li { display: inline; } } -
-
- The topic ‘What CSS do I use to center the logo, title, and tagline on my site?’ is closed to new replies.