Docs

[jsjmccracken]

Hello,

On http://www.tablerockkennels.com/ how do I center the toggle navigation when the website responds to the screen size? It’s currently on the right but I would like it to be centered.

Thank you!

Jacob

[Thai]

Hi Jaob,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-btn-navbar {
    display: block !important;
    margin-right: auto;
    margin-left: auto;
    width: 45px;
    float: none;
    margin-top: 20px;
  }

Hope it helps 🙂

[jsjmccracken]

This reply has been marked as private.

[Nico]

Hi There,

Change the code above into this:

.x-btn-navbar {
    margin-right: auto;
    margin-left: auto;
    width: 50px;
    float: none;
    margin-top: 10px;
    margin-bottom: 10px;
  }

Add this code to center your logo in mobile view.

@media (max-width: 979px){
    margin: 0 auto;
    width: 375px;
    float:none;
}

Let us know how it goes. Hope it helps

Thanks.

[jsjmccracken]

When the site is in mobile view the toggle navigation is still on the right. I would like it to be centered below the logo.

[Jack]

Hi there,

Thanks for writing back!

Try adding the following Custom CSS within Appearance > Customizer > Custom > CSS.

.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 24px;
    margin-top: 10%;
    margin-right: 50%;
}

Thank you!

[jsjmccracken]

This is the lead I needed, Thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts