Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #4459

    I would like to have the mega menu be rounded corners instead of square padding since the menu title is already rounded border on mouseover.



    add following to css/custom.css:

    .main_menu .avia_mega1, .main_menu .avia_mega2, .main_menu .avia_mega3, .main_menu .avia_mega4, .main_menu .avia_mega5 {
    border-radius: 10px;

    #top .main_menu .avia_mega > li > ul, #top .main_menu .avia_mega > li > ul ul {
    border-radius: 10px ;

    And adjust the border radius value.


    Thanks but it does not inherit the border color assigned in the admin part.

    I tried adding something like border-color:#ff0000 to force a color but it stays white, what am I missing

    Thank for the help btw


    Can you post a link to your website please – I need to investigate the css myself.


    sorry only internal so you can t access the test server.


    I found out that the rounding is made by

    .main_menu .avia_mega1, .main_menu .avia_mega2, .main_menu .avia_mega3, .main_menu .avia_mega4, .main_menu .avia_mega5 {

    display: none;

    left: 0;

    padding: 8px;

    reducing it to 4 or lower makes rounded transparent/white borders thats why they show white on my end because reducing the padding removes the color. Trying ti figure out where I can hard code them I basically need the same result as Upscale’s rounded megas


    Basically that’s the standard border radius behaviour. Only chance would be to increase the padding (which of course will have a negative effect on the menu style) or to use bg images with the bg color you’d like to display. Another possibility would be to recode the menu structure so that you can assign a bg color to a layer behind the round corners.

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

The topic ‘Mega Menus rounded borders instead of square’ is closed to new replies.