Jump to content

Center Logo with Hamburger Nav

Recommended Posts

Site URL: https://opera-stl.org/

We put in this code (below) to use the mobile hamburger nav on desktop, but it makes our logo in the header be off center. How can this be fixed?


@media screen and (max-width: 5000px) {
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  .header .header-burger {
    position: absolute;
    display: flex;
    order: 1 !important;
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
.burger-box div {
    display: none;
.burger-box {
    background-image: url(https://static1.squarespace.com/static/5f174588f138424ec2fbd0d7/t/5f1a2c0859f5c362ebe8be8f/1595550728438/Hamburger+Menu.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.