Okay
  Public Ticket #2014440
Drop-down Menu Width
Closed

Comments

  • jmpasto started the conversation
    May 17, 2019 at 6:35am

    Hi,

    I want the width of the popup menu to be able to set it in pixels instead of automatic width.
    Is it possible to do it? and how?

    Thanks in advance

  •  8,994
    Tahir replied
    May 17, 2019 at 11:03pm

    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  • jmpasto replied
    May 24, 2019 at 4:17pm

    Hi,

    The URL is www.grafologia.cat and my goal is each item in the drop-down menu, use a single line line.

    Sorry for delay, but the site is available from yesterday

    Thanks in advance

  •  8,994
    Tahir replied
    May 24, 2019 at 10:20pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    body[data-dropdown-style="minimal"] .sf-menu >li ul {
    width: 34em !important;
}

    Thanks

    ThemeNectar Support Team 

  • jmpasto replied
    May 25, 2019 at 5:28am

    Hi, 

    It Works fine!, I was added 

    body[data-dropdown-style="minimal"] .sf-menu >li ul {
        width: 34px !important;
    }

    Thanks a lot




  •  1
    fmccullou replied
    June 24, 2019 at 2:46pm

    This worked for me as well, however it also affected the mega menu width so that it no longer spans the entire screen. How can I reduce the dropdown width without it reducing the megamenu width?

  •  8,994
    Tahir replied
    June 24, 2019 at 3:05pm

    @fmccullou, Please provide the site url and create a Private Ticket. 

    Best 

    ThemeNectar Support Team 

  •  1
    fmccullou replied
    June 24, 2019 at 3:12pm

    I actually resolved this. Thanks!

  •  2
    George replied
    July 13, 2019 at 1:13pm

    Can we limit the mega-menu width to the upper menu?

    It comes full width for some reason.

    header#top nav >ul >li.megamenu >ul.sub-menu{ width: 80% !important; }

    This code do the trick - but what about centering it?

  •  8,994
    Tahir replied
    July 15, 2019 at 9:56am

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    header#top nav >ul >li.megamenu >ul.sub-menu{
 width: 80% !important;
margin:auto !important; 
}

    Thanks

    ThemeNectar Support Team 

  •  2
    George replied
    July 15, 2019 at 10:19am

    Have you tested this? 

    I tested it on your demo aswell and it is still on the left, even if its limited to 80% of the screen.

  •  8,994
    Tahir replied
    July 15, 2019 at 10:25am

    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •  2
    George replied
    July 15, 2019 at 10:33am

    https://dev.prestigeteliskikeris.gr/


    username: prestige

    password: prestige33

  •  8,994
    Tahir replied
    July 15, 2019 at 10:58am

    Did you try using this option : http://prntscr.com/of7h5g . 

    Best

    ThemeNectar Support Team 

  •  2
  •  8,994
    Tahir replied
    July 16, 2019 at 5:39pm

    @George, 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    header#top nav >ul >li.megamenu >ul.sub-menu {
    width: 70% !important;
}
#top nav >ul >.megamenu >.sub-menu {
    display: table;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

    Thanks

    ThemeNectar Support Team