Problem introducing a pill-button in menu

  • I would like to add a coloured button to the menu-line in a child-theme to twentytwelve, by decorating one of the link in my menu line.

    For this purpose I found this How TO – Pill Buttons on w3schools.com
    So following is now added to my CSS:

    .main-navigation li.menu-item-19587 {
    background: dodgerblue;
    border: none;
    color: yellow;
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    border-radius: 30px;
    font-stretch: expanded;
    font-weight: bold;
    }
    .main-navigation li.menu-item-19587 a:hover {
    color: yellow;
    background: blue;
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    border-radius: 30px;
    font-stretch: expanded;
    font-weight: bold;
    }

    1) the theme does not respond to the “color: white”
    2) the hover part of the CSS should according to w3schools.com only contain one line – background-color – in order to work, I had to add everything else, otherwise the button would be a simple square.
    3) the button is still wrong and not completely changing colour when hovering.

    php version on webpage is 7.3

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Not quite sure on all the specifics you’re trying to target with the CSS code you have shared. As far as the hover effect not being correct, this is because you target the list menu item itself in the first part of the CSS. In the second part, you target the anchor part of the text and not the menu item itself so you get that smaller “button” area.

    If you change .main-navigation li.menu-item-19587 a:hover into .main-navigation li.menu-item-19587:hover it should fill out the whole menu item as you’re expecting I believe.

    Then you’ll have to add another line of CSS such as .main-navigation li.menu-item-19587 a:hover to control how the text of the button acts when you hover over it.

    Thread Starter Mikael Boldt

    (@boldt)

    Thank you very much. Now I understand a little more about CSS.

    My CSS looks now like this and everything is how I want it.

    .main-navigation li.menu-item-19587 {
    background-color: dodgerblue;
    border: none;
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    border-radius: 30px;
    }
    .main-navigation li.menu-item-19587 a {
    font-stretch: expanded;
    font-weight: bold;
    color: yellow;
    }
    .main-navigation li.menu-item-19587:hover {
    background-color: blue;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Problem introducing a pill-button in menu’ is closed to new replies.