WordPress.org

Ready to get started?Download WordPress

Forums

Fruitful
[resolved] Menu bar rounded corners (7 posts)

  1. Progress Concepts
    Member
    Posted 6 months ago #

    Hi,

    I wondered if it would be possible to have the corners of the menu bar slightly rounded?

    Are you aware what the css would be to do this?

    Also, would it be possible to put a fine dividing line between menu options and set the colour? It would be nice if I could then wrap the same coloured line as an outline to the whole menu bar?

    Link to site so you can see http://www.progressconcepts.com

    Any advice very greatly received.

    Thanks.

  2. Progress Concepts
    Member
    Posted 6 months ago #

    By the way, I should say, I have tried the following code for the borders:-

    .main-navigation a {
    border-bottom: 1px solid #888;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-right: 1px solid #888;
    }

    This provides the border, however there is a gap between each menu item, so I see a rectangle around each item.

    I suspect what I therefore want to know is how to remove the padding between cells?

    And also how to make the 4 corners of the full bar slightly rounded (not the individual menu buttons).

    Hope that makes it a little clearer!

    Thanks.

  3. Progress Concepts
    Member
    Posted 6 months ago #

    Hi. I have done some tweaking with the CSS and come up with something I like now.

    Will close this down.

    Thanks.

  4. Fruitful Code
    Member
    Theme Author

    Posted 6 months ago #

    Great!

    For custom development and design you can contact us on our website.

  5. Chamm_88
    Member
    Posted 4 months ago #

    Hi! Progressconcepts! I was looking to create the exact thing. How did you achieve rounded corners for menu items?

    Thank you!

  6. Chamm_88
    Member
    Posted 4 months ago #

    Nevermind. Got it. For anyone looking for help on this:

    .main-navigation a {
    border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    }

    Tweak px for roundedness.

  7. emilyhein727
    Member
    Posted 4 months ago #

    I want to do the same thing to my website...

    To Chamm_88... do you know how to get rid of the gap between each menu item? I want to get rid of the rectangle around each item, but still have rounded edges.

Reply

You must log in to post.

About this Theme

About this Topic