Docs

[cabforward]

Hi! Can you help me give a solid background to the mobile menu? Right now it’s transparent and I can’t see it.
I tried this in the global css:

@media (max-width: 979px) {
	.x-navbar .x-navbar-inner .x-nav-collapse .x-nav>.current-menu-item > a {
		color: #fff !important;
		background-color: #00007f !important;
	}
}

[cabforward]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 979px){
    .x-navbar {
        height: auto;
    }
}

Hope it helps 🙂

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:979px){
    .x-navbar-inner {
        background: #00007f;
    }

    .x-navbar .mobile .x-nav li > a {
        color: #ffffff;
    }
}

Hope this helps – thanks!

[cabforward]

Hi! I only want to have blue behind the header when the mobile button is pushed because it cuts of part of my header image. When it’s in mobile view but the user isn’t viewing the menu, it should show the regular yellow skinny topbar.

[Rue Nel]

Hello There,

I have check your custom css. This particular block is affecting it;

/*@media only screen and (min-width: 980px) { */
.x-navbar.x-navbar-fixed-top {
    height: 70px;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 70px;
    padding-top: 34px;
}

.x-navbar {
    height: 70px;
}
/* } */ /* end media query */

You might need to update it and use this instead:

@media only screen and (min-width: 980px) {
  .x-navbar.x-navbar-fixed-top {
    height: 70px;
  }

  .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 70px;
    padding-top: 34px;
  }

  .x-navbar {
    height: 70px;
  }
}
/* end media query */

Hope this helps.

[cabforward]

I made that edit, and I’m still seeing a huge blue background on the mobile view:

[cabforward]

Trying the upload again

[cabforward]

I made that edit, and I’m still seeing a huge blue background on the mobile view. It needs to be just as short as the header is on the non-mobile view.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 769px) {
.x-brand {
    width: 40%;
    margin-bottom: -23px;
  } }

Hope that helps,

Joao

[cabforward]

That didn’t change anything.

[Paul R]

Hi,

You can try this code instead.

@media (max-width: 979px)
.x-navbar .x-navbar-inner {    
    height: 70px;
}
}

Hope that helps.

[cabforward]

I’m sorry, but that’s not helping.

[Thai]

Hi There,

Please try with this CSS instead:

@media (max-width: 979px){
    a.x-brand.img {
        margin-top: 0;
    }
    a.x-brand.img img {
        max-height: 71px;
        width: auto;
    }
}

Hope it helps 🙂

[Author]

Posts