Docs

[Chris A]

For some reason I am unable to change the mobile button hover color in the css and I’m not sure why. I have found other threads about this, but the code does not seem to be working.

Also, it is not just hover. Once the button is pressed it stays white and does not go back the main color.

Also, I would like to get rid of the white line that appears over the menu when you hover on the sub menu.

Thanks

[Chris A]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

.x-btn-navbar.collapsed:hover, .x-btn-navbar.collapsed:hover i {
    background-color: #727272;
    color: #fff;
}
a.x-btn-navbar {
    background-color: red;
}

Hope it helps.

[Chris A]

great! that worked perfectly. thanks!

The only other thing I can’t figure out is why I can’t seem to change the color of the scroll anchor. It’s grey and I would like it white.

[Rupok]

Hi there,

Thanks for updating. Let’s add this as well :

.x-scroll-top {
  border-color: #fff;
  color: #fff;
  opacity: 0.9;
}

.x-scroll-top:hover{
  opacity: 1;
}

Hope this helps.

Cheers!

[Chris A]

thanks. perfect! that worked great.

[Chris A]

just one more thing actually. I have some text that is currently in my footer that I would like to place in the site, but I really like the font size of spacing that is in the footer for that particular text.

What html could I use to surround that text in the text element to get a similar result.

thanks!

[Rupok]

Hi there,

Thanks for writing back. I didn’t quite get you. Would you clarify a bit with a screenshot that what you are trying to achieve?

Cheers!

[Chris A]

This reply has been marked as private.

[Rupok]

Hi there,

Yes you won’t get the same style because this texts are within footer content that has associated class to style them. That’s why I asked you to clarify where you have used this again within Text Element so that I can check and provide you some code.

You can try placing the below code to get same styling although it’s not the best practice:

<div class="x-colophon bottom">
  <div class="x-container max width">  
    <div class="x-colophon-content">
      <span style="color: white;">Music Composed, Produced, Engineered & Mixed By Chris Arvan  <p> </p><p style="text-align: center;">Artwork & Films Directed By <span style="color: #10505c;"><a target="_blank" href="http://nitinvadukul.com/" style="color: #white;">Nitin Vadukul</a></span></p>&copy; 2016 Chris Arvan Music / Alternate Reality</span>
    </div>

  </div>
</div>

Hope this helps.

[Chris A]

just a small detail, but the white line that appears over the menu when you hover on the sub menu is back.

I’m not sure why that happened. I added the code that you gave me earlier in the thread and I thought it worked, but now I’m seeing the white line again after updating X.

[Rupok]

Hi there,

It seems you have the below CSS that’s causing this :

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: 0 4px 0 0 hsl(0, 0%, 100%) inset;
}

If you can’t find this then maybe you set this from Customizer. In that case you can add this CSS :

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none !important;
}

Cheers!

[Author]

Posts