Move megamenu in view depending on screen size?

HTML & CSS
1

Hi there,

I have the following fiddle:

What I am trying to do is have the mega menus appear on desktop from 1140px onwards,

I can do this by adding this which makes it a width of a Bootstrap container:

.dropdown-menu{ min-width: 1140px }

However, as you can see if teh screen gets smaller, the menu gets cut off.

At the moment, the menus appear to the left of the main nav item.

Is there a way to have the megamenu is view all the time on desktop without making the menu smaller? I’m guessing it could move to the left with the arrow indicate in the middle of the menu?

Or are there any other suggestions?

This is the live version of the menu:
https://modelindex.co.uk/

Any suggestions would be great, thanks!

2

Yes i’d leave the menu where it is on the first item and just move the caret. You’ll need to reset the stacking context but the following should do that.

.dropdown.megamenu{
position:static!important;
}
.megamenu .dropdown-menu{
margin-top:-2rem!important;
}
.megamenu-events .menu-col-left:before, .megamenu-events .menu-col-left:after {
    left: 16rem; 
}

That code refers to the live version and should follow after all the previous css for that menu.

3

Thanks for the reply.

I have added that code, but the menus are now in the same place as each other which I guess could work, but it means the caret isn’t under the item is is a dropdown of.

image

image
image721×161 7.55 KB

I was trying to have them appear under their respected item on the main menu, but not sure how to deal with the fact that the second and third menu get cut off.

I thought about making the width of the menus smaller, but it would mean reducing them quite a lot.

4

I was thinking of keeping the menu to the left and then you could just move the caret.

e.g.

.dropdown.megamenu{
position:static!important;
}
.megamenu .dropdown-menu{
margin:-2rem 0 0 2rem!important;
width:1140px;
}
.megamenu-events .menu-col-left:before, .megamenu-events .menu-col-left:after {
    left: 18rem; 
}
.megamenu-clubs-societies .menu-col-left:before, 
.megamenu-clubs-societies .menu-col-left:after {
    left: 32rem; 
}
1 Like
5

That’s not really viable and is not the way that megamenus are supposed to work. They are supposed to be full width and just the caret moves. Otherwise you are going to make them too small width wise and too long the other way.

6

Thanks, that makes sense.

I seem to have seen a lot of menus that appear under different parents in different locations, but guess it’s better practice to have it so they are full width/in the same place.

The only thing I will need to work out is how to have the third caret appear part of the blue left hand side, but thinking I could add a top border to each so the carat looks part of the appropriate menu

Thank again!

7

Yes I think that’s a good idea and you could add a thick coloured border to the top of the menu to match the caret color. You may need to tweak positions but should be pretty easy.

1 Like
8

I am now thinking that I may want to have an opaque background behind the menu as at the moment the red on red clashes a bit.

I guess I can add a full width and full height div with the opaque background, but not sure how I would get it to appear/hide when the menu is active.

Is there a way to trigger this, or would it be done with display: none and display:block?

9

You could just add some box shadow to the menu to distance it from the background.

1 Like
10

Thanks, I decided to do that and also add a border to the top.

I am now having some issues with the mobile drop down menus appearing.

This is the live site: https://modelindex.co.uk/

What I tried to do is have menus on desktop which is the current megamenus show on desktop and hide on mobile, and then have separate menus on mobile that are hidden on desktop and shown on mobile.

I can’t seem to wok out how to do this as I have tried something like this:

dropdown.megamenu.megamenu-shops-suppliers .dropdown-menu { display: none } .dropdown.megamenu.megamenu-shops-suppliers .mobile-sub-menu { display: block }

but is seems to hide the whole menu/not the correct versions. I think I have the classes wrong.

Is this the way to go or is there a better way to achieve this? I’m thinking it would be better to show/hide a separate menu than trying to restructure the megamenus on mobile?

At the moment the mobile-sub-menu is displaying on desktop/tablet/mobile as I was playing around with it.

11

You’ll need to add the dropdown menu class to the html to allow the js to work I think

e.g.


<div class="mobile-sub-menu dropdown-menu">

Then something like this:

@media screen and (min-width:1201px){
.mobile-sub-menu{display:none}
}

@media screen and (max-width:1200px){
.dropdown-menu:not(.mobile-sub-menu){ display:none!important;}

.mobile-sub-menu{
 position:static!important;
 }
}

I have to go out now but I will retest later if the above is not working for you.

12

I just re-tested and the css and html that I gave works for both menus and can be seen in the following screenshots.

modelindex.co.uk_ (1)
modelindex.co.uk_ (1)542×809 9.89 KB

modelindex.co.uk_ (2)

modelindex.co.uk_ (3)

modelindex.co.uk_ (4)
modelindex.co.uk_ (4)1454×688 37.7 KB

The search needs a bit of restyling but I’llleave that up to yo.

1 Like
13

Many thanks for your help with this.

I have added your code and I think it works, but the mobile sub menu is displaying under the other items an not like your screenshot.

image
image1133×555 46.9 KB

Maybe I have missed something?

14

The megamenu is hidden with this rule that was in the code I posted.

@media screen and (max-width:1200px){
.dropdown-menu:not(.mobile-sub-menu){ display:none!important;}

etc....

That ensures the megamenu is never shown on small screens at all.

It’s fully working in your page with my code added. I’m looking at it now.

15

That is very odd. I can see the megamenu working fine, but the mobile menu is appearing down the page after collapsing it still:

image
image476×534 16.3 KB

I’ve cleared cache and tried a different browser, but still seems to happen :confused:

16

Where have you put this rule?

@media screen and (max-width:1200px){
.dropdown-menu:not(.mobile-sub-menu){ display:none!important;}
}

I can’t find it anywhere.Which file is it in?

17

Very strange. It was in the code, but maybe I didn’t upload which is odd as I pasted all teh code and some of it was there :confused:

It’s working now though :slight_smile:

Thank you so much for that, really appreciate it!

1 Like
18

Good :slight_smile:

I see you still need to add the mobile submenus for events and clubs but the first one shops is toggling ok.

1 Like
19

Thanks, yep I will try to add the others and see how it goes :slight_smile:

Thanks again!

1 Like