Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1214224

    Hi,

    I´m using the following code in order to round the edges of my drop down menu:

    ul.sub-menu {
    border-radius: 10px;}
    .av-main-nav ul li:first-child a {
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
    overflow: hidden;}
    .av-main-nav ul li:last-child a {
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    overflow: hidden;}

    This works fine for:
    1. First drop down menu
    2. Sub drop down menu with only 2 items

    However for a sub drop down menu with 3 items it doesn´t work. Please see the page link below. Any suggestions would be very much appreciated!

    Many thanks and best regards

    #1215795

    Hey ProTravelGolf,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #top #wrap_all .av-main-nav ul ul {
        background-color: #fff;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1216161

    Victoria,

    Thank you for your suggestion however I´m afraid that it didn´t work and the drop down menu is still the same. Any other suggestions?

    Thank you!

    #1216363

    Hi,

    This code works when I check it on your site:

    #top #wrap_all .av-main-nav ul ul {
        background-color: white;
    }

    Where exactly did you put it? If you need further help then please include admin login details in private.

    Best regards,
    Rikard

    #1216411
    This reply has been marked as private.
    #1216799

    Hi,

    Please try this CSS as well:

    ul.sub-menu li a {
      border-radius: 0;
    }

    You might have to remove !important from your current CSS.

    Best regards,
    Rikard

    #1216843
    This reply has been marked as private.
    #1216982

    Hi ProTravelGolf,

    Could you please attach a mockup of what you’re trying to achieve? Maybe we are not on the same page with what we are trying to help you achieve.

    Best regards,
    Victoria

    #1217005
    This reply has been marked as private.
    #1217088

    Hi ProTravelGolf,

    Do you want them all to have the rounded corners?

    Best regards,
    Victoria

    #1217097
    This reply has been marked as private.
    #1217377

    Hi ProTravelGolf,

    In this case, it’s better to use the menu item ids to assign the exact behavior.

    Like so:

    
    #menu-item-8352 a {
        border-radius: 0px !important;
    }
    #menu-item-8353 a {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    

    Best regards,
    Victoria

    #1217382

    Victoria,

    Perfect! That has worked a treat! Thank you so much!

    Best regards

    #1217460

    Hi ProTravelGolf,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1223472
    This reply has been marked as private.
    #1223614

    Hi,

    You can find the ID of the menu item if you inspect it in your browser (right click->inspect). If you can’t do that yourself then let us know which element you are trying to target and we’ll give you the ID for it. Or maybe you want this CSS to apply to all your menu items?

    Best regards,
    Rikard

    #1223622

    Rikard,

    That´s perfect thank you. Great to know how to find the ID regarding different things by inspecting them. That will help going forward!

    Thanks for your help

    #1223854

    Hi ProTravelGolf,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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