Docs

[cabforward]

My logo seems to be stopping my menu item hover background color. And, it seems to be forcing the red striped section to the right at certain screen sizes.

[cabforward]

This reply has been marked as private.

[cabforward]

This reply has been marked as private.

[Jade]

Hi there,

Is it the About menu item hover effect that you are pointing out? You will need to update this code:

#menu-item-13 a:hover, #menu-item-14 a:hover, #menu-item-15 a:hover, #menu-item-16 a:hover {
    background-color: #00007f !Important;
    text-align: center;
    color: #ffffff;
    box-shadow: none;
}

to

#menu-item-12 a:hover,
#menu-item-13 a:hover, #menu-item-14 a:hover, 
#menu-item-15 a:hover, #menu-item-16 a:hover {
    background-color: #00007f !Important;
    text-align: center;
    color: #ffffff;
    box-shadow: none;
}

Would you mind clarifying about the issue in the red striped sections? Thank you.

[cabforward]

The whole menu is dropping down. Please see attached file:

[cabforward]

Trying to attach again

[Rupok]

Hi there,

Thanks for the screenshot and it clarify the issue better.
You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px)  and (max-width: 1114px) {

.x-navbar-inner .x-container.max {
  max-width: 100%;
  width: 95%;
}

.x-nav-wrap.desktop {
  float: right;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 15px;
  padding-right: 15px;
}

}

Hope this helps.

Cheers!

[cabforward]

This didn’t resolve. It’s still dropping down.

[Rupok]

Hi there,

Did you really add the suggested code? I have logged in to your site and can’t see the code on your Customizer. So I assume you are using this in Child Theme’s CSS that’s being overridden by Customizer settings. In that case, kindly update the code :

@media only screen and (min-width: 980px)  and (max-width: 1169px) {

.x-navbar-inner .x-container.max {
  max-width: 100%;
  width: 95%;
}

.x-nav-wrap.desktop {
  float: right;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

}

I have tested the code on your site and must work. So before updating, make sure to clear your browser’s cache and check again.

Thanks

[cabforward]

Great, thank you!

[Thai]

If you need anything else please let us know.

[Author]

Posts