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

  • Resolved rod

    (@nomadarod)


    Hi,
    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?

    grateful,
    Rodrigo

    • 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

    (@domainsupport)

    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.

    Oliver

    Thread Starter rod

    (@nomadarod)

    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,
    Rod

    Plugin Author Oliver Campion

    (@domainsupport)

    Marking this as “resolved” now.

    Oliver

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