I’m building a mega menu based off a cloneable and am having trouble with one of the grey sidebar background blocks within the larger sizes of one of my breakpoints. I have my breakpoints set at 1440px and my next is at 1920px (it’s fine again once it hits the 1920px breakpoint). It is around 1560px that my grey background starts shifting so its out of line with my nav copy (which is in a div on another layer that is not connected with the grey background div). I’ve checked over the original cloneable and reflected the styling and I cannot for the life of me find what the difference is or how I might be able to set another width or position in the larger side of this breakpoint. I did try to add media query to set another width but it doesn’t seem to be working (@vincent just tagged you in another media query article that I thought could help me here). This is the last thing I need to resolve before I can launch early next week! Anyone have any ideas?
hi @kiwijen issue is caused with your fixed width 1440 of your 20-NavContainer when you set it to auto all starts work as expected. The reason is that your 20-NavDropdown-List is full width and you are limiting width of 20-NavContainer that is inside it. Hope that make sense and will help you to fix it.
EDIT: I have checked original nav and splitting (two bg) is to overcomplicated that make your life harder. Original menu is customised to sit exactly by use of fixedpx values and only on largest viewport is set to 50%. It can be done much easier way by using Flex or Grid to create two columns, place content to these and set bg in second column.
In this scenario you will have full control instead using separate component to create bg split. Is different structure approach but like I have said it will be easier to maintain and also it will be responsiveness friendly.
Hi @Stan thanks for your response! Yeah, I was hoping to avoid having to rebuild large elements of the nav given I’m hoping to get this launched ASAP, so was hoping there might have been an easier custom code solution or something.
I have duplicated this same nav and rebuilt the ‘customers’ tab dropdown in the way that you have suggested, by removing the separate layers and using the grid, and changing the background colour of the column within the grid. However I’m now running into some padding issues using this method. It seems the grid wants to sit within the overall padding I’ve implemented at the nav bar level which means that the grey background is not going to the edge of the screen. Any ideas here?
Hi @kiwijen there is no Mega menu on you page now? Building a mega menu can be a bit challenging when it comes to responsiveness. I’m using a good amount of custom JS to create MM. I have send you link with one example to look into. It is not exactly your design but you can take it as some kind of base to work with.
Thanks @Stan! Yeah it can get challenging with responsiveness and so many elements to consider the functionality of that’s for sure! Thanks for sending through your link, I had a look through and I’m not sure that I need to use the JS now that I think I have got the foundational build sorted (the grey background is now built within the grid and is working well responsive! YAY!). However, now I’m having trouble setting up the interactions now that I have changed the foundation - haha of course it is always one challenge after another huh! Do you know much about interactions, mind taking a look to see what I’ve done wrong here? The first click works fine but then after that it bugs out and I’m not quite sure what is causing it. (testing nav read-only can be found in the above test site on the “draft-nav” page. Here is the testing page on staging. Note: I am currently working on this challenge so things might be WIP.
hi @kiwijen so if there is no rush and you are not currently working on it there is no point for me to look into your issue. Once you will get back to it you may have better understanding and have solution for it. So I will step out from this issue.
Hi @Stan Sorry, I meant I am still working on trying to solve this issue. This is time-sensitive and I am working on a crunch time to get this live. I’m getting stuck with these interactions on the newer build (with the grey background within the grid as you suggested) and am struggling to get the elements and timing right.
Because the grey background is now built within the grid (rather than an element behind the content), when in the larger breakpoints (as I have my nav and page body content within a set margin) I found that the grey background within the grid wasn’t going to the page edge on 1920px, so I built a secondary grey element to bridge that gap on the right while on larger breakpoints and it is working! However I’m having trouble with the dropdown interactions - when the primary nav is selected the ‘bridging grey block’ is displaying automatically with the initial background block, instead, this should be displaying at the same time as the nav content (the grid columns which are slightly deplayed). I’ve tried everything to try and hide it and show with the columns but I cannot stop the ‘bridging grey block’ displaying before the content! Now I’m a bit lost… I’d love it if you have any insights as to why it might be doing this… I feel like I am loosing my damn marbles with this mega menu project and need to get it live ASAP!
Oh apologies I didn’t realize that this testing page was password protected on this new testing site! Just to make sure we are looking at the same site - I’ve added all the links below to the site that I am currently working on and just needing to fix the interactions and the password is below Appreciate any help I can get at this point, I feel like I’m almost there!
- haha of course it is always one challenge after another huh! Do you know much about interactions, mind taking a look to see what I’ve done wrong here? The first click works fine but then after that it bugs out and I’m not quite sure what is causing it. (testing nav read-only can be found in the above test site on the “draft-nav” page. 
Appreciate any help I can get at this point, I feel like I’m almost there! 