Docs

[Eric M]

Not sure how this hasnt been added yet but would like to make a menu item into a button with css. can you provide this css to accomplish this?

[Eric M]

This reply has been marked as private.

[Joao]

Hi There,

I have removed the button class from your menu item and added the correct code on Appereance > Customizer > Custom > CSS

Just make the adjustments your self to the color and size.

#menu-item-777 a {
    color: #fff;
    border-color: #ff7600;
    background-color: #ff7600;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding-top: 12px;
    height: 35px;
    margin-top: 25px;
}
#menu-item-777 a span {
    box-shadow: none;
}
#menu-item-777 a:hover {
    color: #fff;
    border-color: #3f96ce;
    background-color: #3f96ce;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5); 
  box-shadow: none;
}
.x-navbar .desktop .x-nav>li>a>span {
    border: none;
}

Hope it helps

Joao

[Eric M]

Can you send the code needed to view the button on tablets and mobile please?

[Joao]

Hi There,

Would you mind clarify what you are trying to achieve?

Where exactly you would like the button to appear on mobile?

Thanks

Joao

[Eric M]

same place the current one is. The styling just doesnt show on mobile devices.

[Jade]

Hi Eric,

Please update the code to:

#menu-item-777 a, 
.x-navbar-wrap .x-navbar .mobile .menu-item-777 a {
    color: #fff;
    border-color: #ff7600;
    background-color: #ff7600;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding-top: 12px;
    height: 35px;
    margin-top: 25px;
}

.x-navbar-wrap .x-navbar .mobile .menu-item-777 a {
    height: auto;
}

#menu-item-777 a span,
.x-navbar-wrap .x-navbar .mobile .menu-item-777 a span {
    box-shadow: none;
}

#menu-item-777 a:hover,
.x-navbar-wrap .x-navbar .mobile a:hover {
    color: #fff;
    border-color: #3f96ce;
    background-color: #3f96ce;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5); 
  box-shadow: none;
}

.x-navbar .desktop .x-nav>li>a>span,
.x-navbar .mobile .x-nav>li>a>span {
    border: none;
}

Hope this helps.

[Author]

Posts