Tagged: , ,

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

    Hi,

    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.

    #166758

    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;    
    }

    Cheers!
    Josue

    #166927

    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!

    ?

    #166934

    Hi!

    Can you post the link to your website?

    Best regards,
    Yigit

    #166944

    Hey,

    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!

    #166959

    Hi!

    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
    }

    Cheers!
    Josue

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

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