Center logo and site title in mobile view

  • Resolved rod

    (@nomadarod)


    2 years, 12 months ago

    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 2 years, 12 months 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)
  • The topic ‘Center logo and site title in mobile view’ is closed to new replies.