Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 22, 2017 at 4:57 pm #867209
    kashcroft

    Hi,

    Is it possible to make menu items circular rather than rectangular?

    I’ve tried the following code> .av-menu-button-colored > a .avia-menu-text { border-radius: 50px!important; }

    However, all that does is make them look kind of oblong.

    I’ve tried increasing the radius higher but that has no effect.

    I thought it may be because the header size was set to slim, but I’ve changed that to large and still get the same.

    Here is a screenshot> https://www.screencast.com/t/tcrWbVQgn41 – I would like them to be more like this> https://www.screencast.com/t/uiI8GsIZ

    Thanks in advance for any help.

    Kevin

    October 22, 2017 at 9:31 pm #867333
    Victoria

    Hey Kevin,

    Could you please give us a link to your website, we need more context to be able to help you.
    For the items to be round, they have to be square :)

    Best regards,
    Victoria

    October 24, 2017 at 7:46 am #868006
    kashcroft

    Hi Victoria,

    Thanks for the reply.

    They won’t be square I guess as you’ll see from the screenshot I provided the menu items have different words which are different lengths. Hope that makes sense :)

    The site is on a development server so I’ve added the code to look at link the private area.

    October 24, 2017 at 10:09 am #868056
    Victoria

    Hi kashcroft,

    I mean the elements have to be square for the border-radius to look like a circle. I see the credentials and no link. Can you add the link to the website, please?

    Best regards,
    Victoria

    October 24, 2017 at 11:21 am #868097
    kashcroft

    No problem :)

    Yes, the link would help!

    Kevin

    October 26, 2017 at 5:05 am #869041
    Ismael

    Hi,

    Thank you for the info. You can start with the following css codes.

    #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
    background: red;
    padding: 10px;
    display: block;  
    height: 100px;
    width: 100px;
    line-height: 75px;
    border-radius: 240px;
    text-align: center;
}

    Adjust the values as needed.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.