Home Forums Weaver Xtreme Theme Increase megamenu width

Topic Resolution: Answered

This topic contains 11 replies, has 3 voices, and was last updated by  MikeDrum 3 weeks, 3 days ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #61697
    Answered

    MikeDrum
    Participant

    Hi Guys,

    I’m wanting to put 4 columns into the megamenu but they come out very small/cramped together.

    I am using the code here to put the columns in: https://www.w3schools.com/howto/howto_css_four_columns.asp

    I’ve tried a few things with that code and looked in Weaver settings but can’t seem to make the mega menu wider so items display properly, am I missing something?

    Thank you.

    Edit: An example of what I’m trying to do https://sci-u.co.uk/

    #61698

    Weaver
    Keymaster

    Are you using a plugin to create your megamenus?

    Weaver Xtreme makes it easy to add custom CSS, and the source of your megamenu plugin would most likely have the best information of what custom CSS might be required to customize your magamenus.

    #61699

    MikeDrum
    Participant

    Hi,

    No plugins, just weaver Xtreme following the megamenu docs.

    I should add I have tried to change the styling as explained in the docs but it doesn’t seem to do anything, maybe the w3 schools it clashing with it?

    Below is what it looks like now. I’m trying to widen that megamenu box
    https://imgur.com/a/siIzHca

    #61700

    Weaver
    Keymaster

    It would be helpful if we could see your site.

    If it is not ready for the public yet, you could share the link via private reply.

    If it is on line, then copy/pasting the code for the menu item from the Menus dashboard menu would probably be enough as that should have the html you are using to create the menu.

    #61703

    MikeDrum
    Participant

    Hi,

    Do you need admin access?

     

    If you see the screenshot in my last reply, I just want to make that mega menu wider.

    I’ve used the html and CSS in the W3 schools link and it looks like the screenshot.

    I’ve tried using the megamenu styling found in the docs but doesn’t change anything

    #61707

    scrambler
    Moderator

    We dont need the admin login, just the link to the public site, so we can be sure of the proper CSS to give you to enlarge the Sub Menu.

    if that does not pan out, I also have an article with CSS to set the sub menu in columns, using the standard menu and not having to recreate the sub menu.

    If you give us the link to the site and explain which sub menus needs to be in column, I can help customize the CSS for it

    https://guide.weavertheme.com/menu-mar-advanced-customizations/#xtwocol

    #61708
    Private Reply

    MikeDrum
    Participant
    This reply has been marked as private.
    #61712
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    The rule below should change the width and shift it left using the values you want

    .mega-normal ul.mega-menu li {width:35em !important;left:-10em;}

     

    #61717

    MikeDrum
    Participant

    Perfect, thank you!

    https://imgur.com/a/ZiXqJrR

    #61718

    MikeDrum
    Participant

    Oh, just one more thing if you don’t mind please..

    https://imgur.com/4RwYXbM

    The menu shows up blank on mobile.
    Is there a way to hide the mega menu on mobile but show the normal one, and hide the normal on on desktop but show on mobile?

    I wish you had a tip jar Scrambler

    #61720

    scrambler
    Moderator

    You will need to specialize the rule for desktop and mobile using the .is-desktop and .is-mobole selector.

    For example, the modified rule below will only be applied on desktop and let the menu show on mobile

    .is-desktop .mega-normal ul.mega-menu li {width:35em !important;left:-10em;}

    If you actually want different menu on mobile and desktop, you could use the primary for desktop(hiding it on mobile), and the secondary for mobile hiding it on desktop.

    #61722

    MikeDrum
    Participant

    .is-mobile wouldn’t work properly because of the columns, but done the primary/secondary and that done the trick!

    Thank you again

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

You must be logged in to reply to this topic.