Mega Menu weirdness - by rnbutler87 - on WordPress WooCommerce support

This topic has 7 replies, 2 voices, and was last updated 7 years, 5 months ago ago by Olga Barlow

  • Avatar: rnbutler87
    rnbutler87
    Participant
    July 1, 2017 at 19:48

    Hi,

    I’m trying to create a simple 4 column mega menu with the static block section underneath.

    I’ve read all the documentation and watched the video on mega menus but I can’t not figure out 2 things:
    – why my columns are stacking on top of each other in stead of next to each other
    – why the mega menu is centred underneath the parent nav and not the left edge

    I’ll give you the log in and you’ll see that it’s the first main menu item entitled ‘Courses’

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 3, 2017 at 16:30

    Hello,

    You have set column width 100% for the every column you have that’s why it shows them one below other. By default column width is 33.33% if you use column number 3.
    Provide me the screenshot of design that you are trying to achieve and I’ll guide you.

    Regards

    Avatar: rnbutler87
    rnbutler87
    Participant
    July 5, 2017 at 18:35

    Hi Olga,

    Thanks for this, I can see where I was slipping up!

    As for my second point here is what I am trying to do:
    – my menu is left aligned in the header
    – I want the sub-menus (mega menu specifically) to align itself with the left edge of the parent menu item, rather than centered under it. It’s not a bit deal for normal sub-menus as they are about the same width as the parent menu item. However, the mega menus would look way better if it was left aligned with the parent menu item.

    Specifically, you can see the mega menu on the ‘Courses’ menu item. You see that it comes out centrally underneath the word ‘Courses’ where as actually I would like the left edge to to remain in aligned to the left edge of the word ‘Courses’

    Does this make sense?

    I think it’s like one line of change in css but I can’t figure out which!

    Many thanks!

    Richard

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 6, 2017 at 13:31

    Hello,

    Try this custom

    .menu-wrapper .menu > li:hover .nav-sublist-dropdown {
        left: 0 !important;
        margin-left: 0 !important;
    }

    Regards

    Avatar: rnbutler87
    rnbutler87
    Participant
    July 6, 2017 at 16:31

    Many thanks, I’ll try it!

    Avatar: rnbutler87
    rnbutler87
    Participant
    July 6, 2017 at 16:49

    Tried it, and this is perfect, thank you so much!!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 7, 2017 at 17:32

    You are welcome!

    Regards

  • Viewing 7 results - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.