New Landing › How can we help? › Atelier › Button Style Menu Item Styling

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Atelier
  • July 21, 2016 at 3:08 am #282801
    Allano
    Member
    Post count: 44

    Hello,

    I am interested in styling a nav button similar to the buttons on this page:
    Specifically a rounded button.

    http://swiftideas.com/elements/buttons-social-icons/

    I tried adding a CSS class to the menu item and it remains a black button.
    Can you recommend which class I should use to mimic these buttons?

    thank you!

    Attachments:
    You must be logged in to view attached files.
    July 21, 2016 at 10:24 am #282894
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please provide me login detail to check and resolve the issue.
    Thanks
    Mohammad

    July 21, 2016 at 11:33 pm #283087
    Allano
    Member
    Post count: 44
    This reply has been marked as private.
    July 22, 2016 at 5:08 am #283096
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please post your login detail here as private reply. There is a checkbox below reply box to make any reply private.
    Thanks
    Mohammad

    July 22, 2016 at 12:04 pm #283241
    Allano
    Member
    Post count: 44
    This reply has been marked as private.
    July 24, 2016 at 4:36 pm #283476
    Allano
    Member
    Post count: 44

    Hello,

    Any idea how to change the button style to one of the normal button styles?
    Thanks,

    Attachments:
    You must be logged in to view attached files.
    July 25, 2016 at 8:49 am #283531
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Try adding this to your custom css:

    .full-center nav#main-navigation ul.menu > li.menu-item:last-child a .menu-item-text {
  padding: 5px 20px;
  background-color: #111;
  color: #fff;
  border-radius: 5px;
}

    – Kyle

    July 25, 2016 at 4:17 pm #283736
    Allano
    Member
    Post count: 44
    This reply has been marked as private.
    July 25, 2016 at 4:27 pm #283744
    Allano
    Member
    Post count: 44
    This reply has been marked as private.
    July 25, 2016 at 4:39 pm #283746
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    It’s not possible to do an icon reveal however for normal hover use this:

    .full-center nav#main-navigation ul.menu > li.menu-item:last-child a:hover .menu-item-text {
  background-color: red;
  color: #fff;
}

    – Kyle

    July 26, 2016 at 8:04 pm #284071
    Allano
    Member
    Post count: 44
    This reply has been marked as private.
    July 28, 2016 at 12:07 am #284432
    Allano
    Member
    Post count: 44
    This reply has been marked as private.
    July 28, 2016 at 7:03 am #284464
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Ok instead of using :last-child, add an extra class to the menu item, something like menubtn then use this css

    .full-center nav#main-navigation ul.menu > li.menu-item.menubtn a .menu-item-text {
padding: 5px 20px;
background-color: #eb3636;
color: #fff;
border-radius: 30px;
}

.full-center nav#main-navigation ul.menu > li.menu-item.menubtn a:hover .menu-item-text {
background-color: #000000;
color: #fff;
}

    – Kyle

  • Back to forum
    Posted in: Atelier
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.