Support » Plugin: Options for Twenty Twenty-One » Center logo and site title in mobile view

  • Resolved rod


    How can I apply these changes in the mobile view:

    – Center the logo and the Site title
    – Move the menu button to the top right corner
    – Reduce the font size of the H1 and H3 that follow

    and, is it possible to remove/change some of the html in the mobile version?


    • This topic was modified 5 months, 3 weeks ago by rod.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Oliver Campion


    Hello Rodrigo,

    You can solve this with a bit of CSS with a media query. Try adding this to “Customizer – Additional CSS” …

    @media only screen and (max-width: 481px) {
    .site-header > .site-logo {
    width: 100%;
    text-align: center;
    .site-header.has-logo.has-title-and-tagline.has-menu .site-branding {
    margin-left: 0;
    width: 100%;
    max-width: none;
    body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation {
    position: static;
    body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container {
    position: absolute;
    top: 0;
    right: 0.6rem;
    .entry-content h1 {
    font-size: 30px !important;
    .entry-content h3 {
    font-size: 16px;

    Modify the above CSS to your requirements.


    Thread Starter rod


    Hi Oliver!
    That worked great. Thank you so much.

    I’ll venture a bit into doing the same for other pages. I’ll let you know if I get stuck.

    Have a great evening,

    Plugin Author Oliver Campion


    Marking this as “resolved” now.


Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.