Docs

[knowmates]

Hi there,

I have two problems regarding the mobile menu:

1) When opening the mobile menu via x-nav-btn the text overlays the dropdown symbols on the right side.

2) I wanted to change the color of the x-nav-btn to another one. Changing color was a success but when I click on the x-nav-btn and the menu opens then the hover of the x-nav-btn is without border radius.

Any idea how to solve this issues?

[knowmates]

This reply has been marked as private.

[Joao]

1- Remove this code from Appereance > Customizer > Custom > CSS

@media (max-width: 1130px) {
.x-navbar-inner {
   text-align: right; }}

2

Please add the following code to your Appereance > Customizer > CSS and adjust the colors according to your Wishes:

.x-btn-navbar.collapsed {
background-color:#db9e57;

}

.x-btn-navbar.collapsed:hover{
background-color:#d34f4e;
}
.x-btn-navbar.collapsed:hover {
background-color:#db9e57 !important;
}

.x-btn-navbar {
background-color:#db9e57 !important;
}

Hope that helps,

If you are using RENEW STACK you should be able to find all the color choices on Appereance > Customizer > Renew and the code should´t not be necessary.

I could not login on your website with the credentials above.

Hope that helps,

Joao

[knowmates]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the screenshots.
Please check this part from your custom CSS:

@media (max-width: 1130px){
  .x-nav-wrap.desktop{
    display:none
  }
  .x-nav-wrap.mobile{
    display:block
  }
  .x-nav-wrap.mobile.collapse{
    display:none
  }
  .x-nav-wrap.mobile.collapse.in{
    display:block
  }
  .x-btn-navbar {
    display: inline-block;
    text-align: right;
  }
  
}

Update this part:

  .x-btn-navbar {
    display: inline-block;
    text-align: right;
  }

To this:

  .x-btn-navbar {
    display: inline-block;
    text-align: right;
    float:right
  }

For the hover issue, it is a firefox settings wherein it adds a border. Please add this CSS to remove it:

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
   outline: none;
}

Hope this helps.

[knowmates]

helped! many thanks 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts