Style a Button

Support
#1

Hello,

What css would I need to make my CTA button in the header match the CTA button in the landing page?

http://attcommunity.com/

Thanks

#2

Hi Stephen,

Thanks for writing in!

I can see that you already added this code to style your button the in the header:

.x-navbar .x-nav>li:last-child a {
    border: 1px solid #d52991;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    margin-top: 36px;
    max-height: 34px;
    border-radius: 2px;
    box-shadow: none !important;
    background-color: #d52991;
}

Please have it updated and use this instead:

.x-navbar .x-nav>li:last-child a {
    border: 1px solid #d52991;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    margin-top: 36px;
    max-height: 34px;
    border-radius: 5px;
    box-shadow: none !important;
    background-color: #d52991;
}

.x-navbar .x-nav>li:last-child a:hover {
    color: rgba(0,0,0,0.5);
    background-color: white;
    border: 1px solid white;
}

.x-navbar .x-nav>li:last-child a span {
    border: none !important;
}

And you will have this when hovered:

Hope this helps.

#3

Thanks that worked! Also my mobile nav menu has a transparent background due to the code I put in for the desktop menu. How could I adjust that to be a white background?

Thanks!

#4

Hello Stephen,

Thanks for updating the thread. :slight_smile:

I see that the mobile dropdown menu is having white background color. However, the hamburger menu is transparent. If you would like to have white background color behind hamburger menu, please add following CSS under X > Theme Options > CSS:

.x-btn-navbar.collapsed {
    background-color: #fff;
    padding: 10px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

Yes you are correct, on the desktop computer it is showing white. However on my actual iphone the menu is still popping up as clear. I have already cleared my cache as well.

#6

Hi,

Please change this code in your Theme Options > CSS

@media (max-width: 979px) {
.x-nav-wrap.mobile {
    background-color: rgba(255,255,255);
    padding: 10px;
}
}

with this

@media (max-width: 979px) {
.x-nav-wrap.mobile {
    background-color:#fff;
    padding: 10px;
}
}

Hope that helps

#7

On the iphone it is still showing clear.

#8

Hello Stephen,

Please clear your mobile phone’s browser cache or use private browsing mode.

Please let us know how it goes.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.