Make menu item look like a button?

  • Resolved Wikzo

    (@wikzo)


    6 years, 1 month ago

    In my menu, the last item is “Contact”. I would like to make it visually more distinct, e.g., by making it look like a blue button instead of just text.

    Example: here on ww.wp.xz.cn, you can see a menu with “Showcase”, “Themes”, “Plugins”, etc. The last menu item is “Get WordPress”, which is a big blue button.

    Can I get something similar?

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • dimned

    (@dimned)

    6 years, 1 month ago

    Hi @wikzo,
    Yes, you can do this be following the steps below:

    – navigate to dashboard > appearance > menus > select primary menu
    – at the top right-hand corner of your screen click on Screen Options and enable CSS Classes and hide screen options
    – select Contact menu items and add button class to CSS Classes (optional) field. Save changes and preview your site.

    You may add a custom class to the menu item and style the button in a way you want.

    It would be much appreciated if you rate Getwid Base theme https://ww.wp.xz.cn/support/theme/getwid-base/reviews/ and Getwid plugin too https://ww.wp.xz.cn/support/plugin/getwid/reviews/

    Thread Starter Wikzo

    (@wikzo)

    6 years, 1 month ago

    @dimned Thanks, that is what I needed! I just changed its color to blue instead of purple via Customize –> Colors –> Primary Color.

    However, I would like to use normal corners instead of the default rounded corners + maybe make the overall button a bit smaller to make it align better with the other menu items.

    How do I add a custom button class and what should I write in it to have things like default except the rounded corners?

    Yes, of course I will rate the theme 🙂

    • This reply was modified 6 years, 1 month ago by Wikzo.
    Thread Starter Wikzo

    (@wikzo)

    6 years, 1 month ago

    Update: I just overwrote the current button class and set its border-radius to 0px:

    .button {
  border-radius: 0px;
}
    Thread Starter Wikzo

    (@wikzo)

    6 years, 1 month ago

    @dimned I found a new problem: when the menu item is currently selected, the text color and button color are identical, so you cannot read the text.

    I tried making a custom button, but I cannot change the text color when the item is selected.

    .customButton{
	border-radius: 0px;
	background: #68c5f9;
	color: #fff; !important;
}

.customButton:hover{
	border-radius: 0px;
	background: #345975;
	color: #fff; !important;
}

    Using the inspector in Firefox, you can see that it inherits the text color from .main-navigation .current-menu-item.

    Screenshot example: https://imgur.com/gd7u3QO

    How can I force the text ONLY FOR THE BUTTON to always be white?

    I tried the following, but it makes both normal text menus and button menus white:

    .current_page_item a, .customButton {
   color:#fff!important;
}
    • This reply was modified 6 years, 1 month ago by Wikzo.
    • This reply was modified 6 years, 1 month ago by Wikzo.
    dimned

    (@dimned)

    6 years, 1 month ago

    Hi @wikzo,
    You may try to use the style like this

    li.contact-button.current_page_item  a{
 color:#fff;
}

    Note: when you add !important you should put a space next to the color code or other style value like color:#fff!important;

    Thread Starter Wikzo

    (@wikzo)

    6 years, 1 month ago

    Thanks, it works!

    I actually don’t know what !important does specifically. It was just something I found other people using.

    dimned

    (@dimned)

    6 years, 1 month ago

    Hi @wikzo,
    Thank you for your reply. !important allows you to increase priority of your custom code over the code of the developer when your custom code is not applied.

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

The topic ‘Make menu item look like a button?’ is closed to new replies.