Change background padding for menu items

  • Resolved inj9nhs3fhpabx4

    (@inj9nhs3fhpabx4)


    6 years, 5 months ago

    I want to make the ‘Buy’ and ‘Contact’ menu items look like buttons. To that end, via Appearance->menu->CSS class I have created the CSS class for each, ‘buy-navmenu’ and ‘contact-navmenu’. I have added the following custom CSS code. However, the two menu items need some space in between and the height of the background color is too tall and needs to be reduced. Please advice, what changes to code can add spaces in between only these two menu items and how to reduce the background color height for only these two menu items.

    
.buy-navmenu{
  background:#2905a1;
border-radius: 10px;
}

.buy-navmenu a{
  color:#ee1f23 !important;
  font-weight: 900 !important;
}

.buy-navmenu a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}

.contact-navmenu{
  background:#6C6F70;
border-radius: 10px;
}

.contact-navmenu a{
  color:#2905a1 !important;
  font-weight: 900 !important;
}

.contact-navmenu a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author oceanwp

    (@oceanwp)

    Hello, do you want to do something like this? https://store.oceanwp.org
    If yes, just add the “btn” class to your menu items.

    Thread Starter inj9nhs3fhpabx4

    (@inj9nhs3fhpabx4)

    Yes that’s the look, except I want two buttons each a different color.
    Also, I want these two buttons remain as menu items of the primary header menu, in the footer menu widget, and in mobile menus.
    What is the syntax for renaming the two classes to a btn? Is it to append -btn to the class?

    What needs to change in the following?

    .buy-navmenu-btn{
  background:#2905a1;
border-radius: 10px;
}

.buy-navmenu-btn a{
  color:#ee1f23 !important;
  font-weight: 900 !important;
}

.buy-navmenu-btn a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}

    Thanks for your help.
    Also, is there a way to make one of these buttons to be scrollable/floating?

    Thread Starter inj9nhs3fhpabx4

    (@inj9nhs3fhpabx4)

    Figured out all I had to do was add ‘btn’ before ‘buy-navmenu’ for class name.
    Thanks for the help.

    Theme Author oceanwp

    (@oceanwp)

    Yes ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change background padding for menu items’ is closed to new replies.