Canvas Support

Mega Menu Navigation

5 replies·opened Jul 15, 2022
C
coconghaileJul 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 <ul> and <li> at all levels.

The code below is your Mega Menu Navigation:

<li class="menu-item mega-menu">
  <a class="menu-link" href="#"><div>Competition Name</div></a>
  <div class="mega-menu-content mega-menu-style-2">
    <div class="container">
      <div class="row">
        <ul class="sub-menu-container mega-menu-column col-lg-3">
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>National</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
        </ul>
        <ul class="sub-menu-container mega-menu-column col-lg-3">
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>Dublin</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
        </ul>
        <ul class="sub-menu-container mega-menu-column col-lg-3">
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>Kerry</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
        </ul>
        <ul class="sub-menu-container mega-menu-column col-lg-3">
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>Galway</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>

BUT the issue I have is the <ul>'s at <ul class="sub-menu-container mega-menu-column col-lg-3"> directly after the DIV ROW. When I create my pages the layout of the <ul>'s and <li>'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 <li>'s inside that <ul>. Not multiple <ul>'s like you have. Because I don't have multiple <ul>'s like you, my Mega Menu doesn't have the Bootstrap column layout working properly. 

<li class="menu-item mega-menu">
  <a class="menu-link" href="#"><div>Competition Mine</div></a>
  <div class="mega-menu-content mega-menu-style-2">
    <div class="container">
      <div class="row">
        <ul class="sub-menu-container mega-menu-column col-lg-3">
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>National</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>Dublin</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>Kerry</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
          <li class="menu-item mega-menu-title">
            <a class="menu-link" href="#"><div>Galway</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>

Do you have code that uses one <ul> and then the <li>'s inside use the Bootstrap class class=col-lg-3 to make them sit side by side? Does this make sense?

S
SemiColonWebSTAFFJul 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 <li class="sub-menu-container mega-menu-column col-lg-3">. 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.

C
coconghaileJul 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 <ul>'s and only have the one <ul> but multiple <li>'s in it. I moved the col-lg-3 from the <ul> and added it to the multiple <li> 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. 

<li class="menu-item mega-menu">
  <a class="menu-link" href="#"><div>Competition Mine</div></a>
  <div class="mega-menu-content mega-menu-style-2">
    <div class="container">
      <div class="row">
        <ul class="sub-menu-container mega-menu-column">
          <li class="menu-item mega-menu-title col-lg-3">
            <a class="menu-link" href="#"><div>National</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
          <li class="menu-item mega-menu-title col-lg-3">
            <a class="menu-link" href="#"><div>Dublin</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
          <li class="menu-item mega-menu-title col-lg-3">
            <a class="menu-link" href="#"><div>Kerry</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
          <li class="menu-item mega-menu-title col-lg-3">
            <a class="menu-link" href="#"><div>Galway</div></a>
            <ul class="sub-menu-container">
              <li class="menu-item">
                <a class="menu-link" href="about.html"><div>Semi-Final</div></a>
                <ul class="sub-menu-container mega-menu-dropdown">
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>           
                  <li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>      
                </ul>
              </li>
              <li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>
S
SemiColonWebSTAFFJul 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:

<li class="menu-item mega-menu">
	<a class="menu-link" href="#"><div>Competition Mine</div></a>
	<div class="mega-menu-content mega-menu-style-2">
		<div class="container">
			<ul class="row list-unstyled">
				<li class="menu-item mega-menu-title mt-0 col-lg-3 mega-menu-column">
					<a class="menu-link" href="#"><div>National</div></a>
					<ul class="sub-menu-container">
						<li class="menu-item">
							<a class="menu-link" href="about.html"><div>Semi-Final</div></a>
							<ul class="sub-menu-container mega-menu-dropdown">
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>
							</ul>
						</li>
						<li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
					</ul>
				</li>
				<li class="menu-item mega-menu-title mt-0 col-lg-3 mega-menu-column">
					<a class="menu-link" href="#"><div>Dublin</div></a>
					<ul class="sub-menu-container">
						<li class="menu-item">
							<a class="menu-link" href="about.html"><div>Semi-Final</div></a>
							<ul class="sub-menu-container mega-menu-dropdown">
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>
							</ul>
						</li>
						<li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
					</ul>
				</li>
				<li class="menu-item mega-menu-title mt-0 col-lg-3 mega-menu-column">
					<a class="menu-link" href="#"><div>Kerry</div></a>
					<ul class="sub-menu-container">
						<li class="menu-item">
							<a class="menu-link" href="about.html"><div>Semi-Final</div></a>
							<ul class="sub-menu-container mega-menu-dropdown">
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>
							</ul>
						</li>
						<li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
					</ul>
				</li>
				<li class="menu-item mega-menu-title mt-0 col-lg-3 mega-menu-column">
					<a class="menu-link" href="#"><div>Galway</div></a>
					<ul class="sub-menu-container">
						<li class="menu-item">
							<a class="menu-link" href="about.html"><div>Semi-Final</div></a>
							<ul class="sub-menu-container mega-menu-dropdown">
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 1</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#"><div>Game 2</div></a></li>
							</ul>
						</li>
						<li class="menu-item"><a class="menu-link" href="#"><div>Final</div></a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</li>

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.

C
coconghaileJul 20, 2022

Thank you so so much. I really appreciate it.

S
SemiColonWebSTAFFJul 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