Mega Menu Navigation

5 replies · opened Jul 15, 2022

CcoconghaileJul 15, 2022

I absolutely love the Mega Menu Navigation....LOVE IT!. I'm trying to add it to an existing website at the moment but I'm having issues. I'm using a CMS called Modx Revolution and an extra for the navigation called pdoMenu. I set up snippets for the `` and `

  • ` at all levels.

The code below is your Mega Menu Navigation:


- 
  [Competition Name](#)
  
    
      
        
          
- 
            [National](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
        
        
          
- 
            [Dublin](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
        
        
          
- 
            [Kerry](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
        
        
          
- 
            [Galway](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
        
      
    
  

BUT the issue I have is the 's at directly after the DIV ROW. When I create my pages the layout of the ``'s and `

  • 's is slightly different. The code below is how it comes out for me. As you can see I have one ul and all the
  • `'s inside that . Not multiple 's like you have. Because I don't have multiple ``'s like you, my Mega Menu doesn't have the Bootstrap column layout working properly.

- 
  [Competition Mine](#)
  
    
      
        
          
- 
            [National](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
          
- 
            [Dublin](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
          
- 
            [Kerry](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
          
- 
            [Galway](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
        
      
    
  

Do you have code that uses one `` and then the `

  • 's inside use the Bootstrap class class=col-lg-3` to make them sit side by side? Does this make sense?
SSemicolon WebSTAFFJul 18, 2022

Hello,

Thanks for your Kind Patience and Apologies for the delays in replying.

We have designed the Mega Menus in a way that they do not use ul/li/div tags specifically for arranging the Mega Menu Columns or Items. They simply use CSS Classes which can be used with your own HTML Structure for specific Customizations based on CMS requirements. However, you will need to do this manually in the backend codes as the frontend codes are already implemented in such a way where you can readily use `

  • `. But we don't see how the Parent/Child Structure will work in this case. The current structure is the best possible structure we could come up with which works well with all content scenarios and Valid HTML List Structure for Menus (for better SEO).

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CcoconghaileJul 19, 2022

I tried to change the code slightly where I keep the code almost the same except I would get rid of the multiple 's and only have the one but multiple `

  • 's in it. I moved the col-lg-3from the `` and added it to the multiple
  • ` but no joy. Code below.

As you can see in the image, the navigation looks fine except the columns all sit under each other, instead of beside each other like Bootstrap.


- 
  [Competition Mine](#)
  
    
      
        
          
- 
            [National](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
          
- 
            [Dublin](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
          
- 
            [Kerry](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
          
- 
            [Galway](#)
            
              
- 
                [Semi-Final](about.html)
                
                  
- [Game 1](#)           
                  
- [Game 2](#)      
                
              
              
- [Final](#)
            
          
        
      
    
  
SSemicolon WebSTAFFJul 19, 2022

Hello,

The Bootstrap Columns must be placed directly under the .row DIV which is why it does not work. Consider using this code instead:
[ch_pre]

[Competition Mine](#)

[/ch_pre]

This appears to be working fine for us. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CcoconghaileJul 20, 2022

Thank you so so much. I really appreciate it.

SSemicolon WebSTAFFJul 20, 2022

Hello,

Very Happy to Help! :)

Please do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard