Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #166736


    I’m having issues styling the main menu text links.
    I would like to make them look like buttons, rather than only text.
    I understand it’s possible to go with something like this in CSS:

    #menu-item-999 {
    background: red;
    padding-left: 10px;
    padding-right: 10px;

    However, this gives me a big button covering the entire height of the header menu container. I’ve tried adding padding-top and padding-bottom in there, but no luck.

    Ideally, I would like the menu items to look like the submit buttons you have on this site (on your contact page for example), but with round corners. How should I do this?

    Thank you for a beautiful theme.


    Hello Ramiko!

    Try with this:

    #top .main_menu .menu > li > a{
        padding: 10px;
        background: gray;
        height: auto !important;
        line-height: 16px !important;
        border-radius: 10px;
        margin: 0 3px;    



    Hi Josue,

    Almost! With this the text is styled the way I want. Thank you.
    However, the whole menu is not centered horizontally anymore. It moved up to the point where its now touching the small top menu!




    Can you post the link to your website?

    Best regards,



    Unfortunately, it’s not live yet!
    Here are 2 screenshots, one taken before adding the CSS from above, and one after adding it.

    p.s. I did previously remove the search icon from the menu using:

    #menu-item-search {
    display: none;

    But I don’t think this has anything to do with the menu changing height like this after I add the new button styling from above.

    Thank you!



    Yes it has, because in order to make it appear like a button i have to alter the height (it was vertically centered because the original height was 100%).

    Try this:

    #top .main_menu .menu {
        margin-top: 35px
    #top .header-scrolled .main_menu .menu {
        margin-top: 3px


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘How to style the main menu text buttons?’ is closed to new replies.