Centering button in header on mobile

  • Resolved jodybethw

    (@jodybethw)


    9 months ago

    I have a button in the header, to the right of the menu. On mobile, the button is aligning to the left, under the logo. Ideally, I’d love the button to appear within the dropdown hamburger menu on mobile. Is that possible?

    If not, I’d like the button it to be centered, but can’t figure out how to get it to do so. I know how to write a media query; what is the CSS I need to apply, and to which block do i need to apply it? (I created the .nav-button class for the button block, and it is justified to center. Thank you!

    • This topic was modified 9 months ago by jodybethw.
    • This topic was modified 9 months ago by jodybethw.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator jordesign

    (@jordesign)

    Hi @jodybethw – you could try this CSS ??

    @media (max-width: 599px){
.wp-container-core-buttons-layout-1.wp-container-core-buttons-layout-1.nav-button {
    width: 100%;
}
}
    Thread Starter jodybethw

    (@jodybethw)

    @jordesign on my iphone 14 running Chrome, I am seeing the hamburger centered under the logo, but the button is to the right of the hamburger, not underneath as I would have hoped. Anything I can do? :/ Thank you for your help!

    • This reply was modified 8 months, 4 weeks ago by jodybethw.
    Moderator jordesign

    (@jordesign)

    Hi @jodybethw – I’m taking a look at the site, but don’t entirely see what you mean. Would you be willing to share a screenshot of the different things you mentioned?

    If you go to https://snipboard.io/ you can upload the screenshot there and it will provide a URL – which you can paste into a reply.

    Thread Starter jodybethw

    (@jodybethw)

    I ran out of time, so I removed the button. Never found a solution.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Centering button in header on mobile’ is closed to new replies.