Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 26, 2013 at 9:09 pm #166736
    Ramiko

    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.

    September 26, 2013 at 11:10 pm #166758
    Josue

    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

    September 26, 2013 at 11:53 pm #166927
    Ramiko

    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!

    ?

    September 27, 2013 at 12:13 am #166934
    Yigit

    Hi!

    Can you post the link to your website?

    Best regards,
    Yigit

    September 27, 2013 at 12:50 am #166944
    Ramiko

    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!

    September 27, 2013 at 2:41 am #166959
    Josue

    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

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to style the main menu text buttons?’ is closed to new replies.