Okay
  Public Ticket #3374339
mega menu centered
Closed

Comments

  •  15
    DrKarma started the conversation
    May 19, 2023 at 4:47pm

    Hi There,

    I created a mega menu with a lot of CSS code, because I want the columns to be centered. See attached.

    Is there an easier way to do this?
    The column width I set in the menu options, but I don't know how to make the icon and text be centered in the column and how I make the columns be centered in the mega menu. Those last 2, I set now with CSS.

    Can I do that in a different way?

    Attached files:  Schermafbeelding 2023-05-19 om 12.39.22.png

  •  3,001
    Andrew replied
    May 19, 2023 at 5:11pm

    Hello there,

    Thank you for reaching out to us.

    Could you share your URL so we can check this out for you?

    We look forward to your feedback.

    Cheers,

  •  15
    DrKarma replied
    May 19, 2023 at 5:41pm

    The URL is https://pedantic-lamport.85-17-55-175.plesk.page/

    I only created it for "Education'.
    I have an placeholder live, but I'l take it offline of now.

    Hope you can help!
    Kind regards,

    Eefke

  •  1,923
    Judith replied
    May 19, 2023 at 8:19pm

    Hi Eefke,

    I request you refer to this article as a guide to help you have an easy time with the setup : http://themenectar.com/docs/salient/salient-menu-options/.

    Thanks.

  •  15
    DrKarma replied
    May 19, 2023 at 8:47pm

    Hi Judith,

    I checked that article but it doesn't help.
    So that's why I asked you guys...

  •  1,923
    Judith replied
    May 20, 2023 at 6:25am

    Hi there,

    I am not sure, I clearly understood your query, is it possible you can share a short screencast describing the issue so that we can respond more accurately.

    Thanks.

  •  15
    DrKarma replied
    May 20, 2023 at 3:41pm

    Hi,

    Attached you'll find some screenshots of the mega menu with CSS and without CSS.
    I need it to be like the one with CSS, so centered,  but don't want to use that much CSS for every item.

    The code I used;
    #header-outer nav>ul>.megamenu.nectar-megamenu-menu-item>.sub-menu, #header-outer nav>ul>.nectar-megamenu-menu-item>.sub-menu {

        padding-left: 38%!important;}

    #header-outer nav >ul >.megamenu.nectar-megamenu-menu-item >.sub-menu > li.menu-item-91.megamenu-column-padding-20px {

        text-align: center;}

    #header-outer nav >ul >.megamenu.nectar-megamenu-menu-item >.sub-menu > li.menu-item-94.megamenu-column-padding-20px {

        text-align: center;}

    #header-outer nav >ul >.megamenu.nectar-megamenu-menu-item >.sub-menu > li.menu-item-95.megamenu-column-padding-20px {

        text-align: center;}


    So how can I make the menu look like I want without all the code?

    Attached files:  Menu without CSS code.png
      Menu with CSS code - centered.png

  •  8,943
    Tahir replied
    May 22, 2023 at 9:54am

    Hey Again,

    Please provide a live url where we can view the menu and adjust the CSS accordingly in the live browser.

    Thanks.

    ThemeNectar Support Team 

  •  15
  •  15
    DrKarma replied
    May 22, 2023 at 2:58pm

    To be sure again the question I ask;

    Can I create a centered Mega menu without using CSS?
    If Yes, than how?

  •  8,943
    Tahir replied
    May 23, 2023 at 10:57am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    #header-outer nav>ul>.megamenu.nectar-megamenu-menu-item>.sub-menu, #header-outer nav>ul>.nectar-megamenu-menu-item>.sub-menu {
    display: flex !important;
    justify-content: center !important;
}

    Thanks

    ThemeNectar Support Team 

  •  15
    DrKarma replied
    May 23, 2023 at 2:49pm

    Hi Tahir,

    Thanks, it works now!

    Only one more thing; Can I also make the menu items align in the middle of the column?
    Now 'podcasts' is to much to the left. And I have no clue why. All settings are the same.
    Investigating with 'inspect element' isn't possible because the menu slides back when the mouse is not on it.

    Hope you can help again!
    Thanks in advance

  •  8,943
    Tahir replied
    May 23, 2023 at 3:26pm

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    #header-outer nav >ul >.megamenu.nectar-megamenu-menu-item >.sub-menu > li.menu-item-95.megamenu-column-padding-20px {
    padding: 20px !important;
}

    Thanks

    ThemeNectar Support Team 

  •  15
    DrKarma replied
    May 23, 2023 at 3:30pm

    Thanks Tahir! Now it's perfect.

    You can close this ticket


  •  15
    DrKarma replied
    May 23, 2023 at 5:29pm

    Sorry Tahir,

    I created some extra menu items like Community and the Forum isn't centered in the column like the others.
    I made the others center by using .nectar-ext-menu-item {text-align: center;} but somehow it doesn't work on the Forum and Membership items.

    Do you know why? And how I can fix it again?
    Thanks again!

  •  15
    DrKarma replied
    May 23, 2023 at 5:39pm

    Oh did it!

    I added    .sf-menu {text-align: center;}  

    Is this okay or will have trouble with this on another level?
    Don't know what other item in the website .sf-menu is connected to...

  •  3,001
    Andrew replied
    May 23, 2023 at 5:44pm

    Hello again,

    Thank you for getting back to us.

    The sf-menu class is only associated with header menu  items.

    I hope that clarifies this request.

    Kind regards,

  •  15
    DrKarma replied
    May 23, 2023 at 5:45pm

    Okay thanks Andrew!

    Then now you can really close this ticket ;-)