Есть пункт меню как кнопка, как переделать его в ссылку со скругленным фоном?

Question

[johnmoll2]

Есть сайт на WP с меню. Ссылка: -
Пункт меню растягивается по всей высоте:

Мне нужно сделать active таким, как на башорге:

То есть скруглённый бордер-фон с пэддингом.
Не смог понять, что заменить в CSS.
Есть какие-то идеи, уважаемые профессионалы?

Answer 1

[Astrohas]

li.active>a>span{
  background-color: #F4EFDD;
  border-radius: 5px;
   color: #444;
display: inline-block;
line-height: 1;
padding: 10px
}

Comments

[johnmoll2]

Спасибо за ответ! Практически сработало, но при попытке расширить педдингом выдаёт аппендикс справа.

[johnmoll2]

https://www.mycloud.ch/l/L00FD9C74835B350202FCC127...

[Astrohas]

попробуйте так ^

[johnmoll2]

Хасан Истамкулов: попробовал и проблему нашел — span plus. Только как убрать его, подскажете?

[Astrohas]

Backspace -ом

Answer 2

[Justin Bieber]

стызжено с башорга ксс :)

li.active>a>span {
    /* background-color: #F4EFDD; */
    /* border-radius: 5px; */
    /* color: #444; */
    color: #333;
    background: #f4efdd;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 0px 5px 2px 5px;
    margin: 0px 5px -2px -5px;
    border: 0;
}

так лучше будет, и удали второй спан рядом который plus

а почем сайты делаете если не секрет? =D

Comments

[johnmoll2]

Всё зависит от задачи, на самом деле. Практически вышло, а как убрать span plus, подскажете?

Answer 3

[DTX]

Answer 4

[johnmoll2]

Вопрос решён, спасибо всем кто помогал!
li.active>a>span.plus{
display:none
}
li.active>a>span{
/* vertical-align: text-top; */
height: 20px;
background-color: #F4EFDD;
border-radius: 5px;
color: #444;
padding: 4px .5em;
}