Docs

[ATCompressors]

I’ve been having a play around with the burger menu to see if I could make it look and act a little more like the following burger menu:

I think I’ve managed to create something like it, but the text starts off the left and then bounces to the center. I’d rather the text stay centered.

Below is all of the CSS I’m using on the burger menu:

/* Mobile Menu */
.x-btn-navbar, .x-btn-navbar.collapsed {
  animation: not-checked-anim .2s both;
  border-radius: 0%;
  border-bottom-left-radius: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.26);
  font-size: 17px;
  height: 100px;
  margin: 0;
  padding: 0;
  width: 100px;
  transition: .1s;
  margin-left: auto;
}
.x-btn-navbar .x-icon-bars {
  cursor: pointer;
  font-size: 30px;
  height: 5px;
  position: absolute;
  right: 25px;
  top: 25px;
  width: 30px;
  z-index: 1;
}
.x-btn-navbar {
  border-bottom-left-radius: 0%;
  margin-top: 0px !important;
  width: 100%;
}
.masthead-inline .x-btn-navbar {
  float: none;
}
.x-nav-wrap.mobile.collapse.in {
  position: relative;
}
.x-navbar .mobile .x-nav {
  background-color: #0a0a0a;
  margin: 25px 0;
  margin-top: 0px;
  position: absolute;
  width: 100%;
}
/* hidden logo and background */
@media(max-width: 786px) {
.x-nav-wrap.mobile.collapse.in {
  text-align: center;
  overflow: visible;
}
.logo-menu-item {
  display: none;
}
}
/* menu to right, logo with margin */
.masthead.masthead-inline > .x-navbar-wrap > .x-navbar > .x-navbar-inner > .x-container.width {
  width: 100%;
}
.x-brand img {
  margin-left: 25px;
}

If there is a vastly better way of implementing a full-screen menu like the example on CodePen, I’ll be forever grateful for your advice or recommendation.

I’ll leave my login credentials if you should need them in the message below.

[ATCompressors]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-navbar .mobile .x-nav {
    text-align: center !important;
}

Hope it helps

Joao

[ATCompressors]

Worked a treat. Thank you, Joao. 😀

[Rahul]

You’re most welcome!

Let us know if we can help with anything else.

Thanks!

[Author]

Posts