Support » Theme: Getwid Base » Make menu item look like a button?

  • Resolved Wikzo

    (@wikzo)


    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 WordPress.org, 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)
  • 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://wordpress.org/support/theme/getwid-base/reviews/ and Getwid plugin too https://wordpress.org/support/plugin/getwid/reviews/

    Thread Starter Wikzo

    (@wikzo)

    @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 1 year, 7 months ago by Wikzo.
    Thread Starter Wikzo

    (@wikzo)

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

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

    (@wikzo)

    @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 1 year, 7 months ago by Wikzo.
    • This reply was modified 1 year, 7 months ago by Wikzo.

    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)

    Thanks, it works!

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

    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.