Menue

[ulmayer]

Hello, I just have one quick question: I am currently working on a website with template 6.2. Is it possible to include a menu like the one on the following page?

https://de.susannekaufmann.com/

---

Template Version: 6.2

[Support]

Hello,

You can have a similar structure using a mega menu and custom css.

First you need a mega menu item with this HTML structure:

<li class="dropdown dropdown-mega custom-dropdown-mega">
	<a class="dropdown-item dropdown-toggle" href="#">
		Elements
	</a>
	<ul class="dropdown-menu">
		<li>
			<div class="dropdown-mega-content">
				<div class="row">
					<div class="col-lg-3">
						<span class="dropdown-mega-sub-title">Elements 1</span>
						<ul class="dropdown-mega-sub-nav">
							<li><a class="dropdown-item" href="elements-accordions.html">Accordions</a></li>
							<li><a class="dropdown-item" href="elements-toggles.html">Toggles</a></li>
							<li><a class="dropdown-item" href="elements-tabs.html">Tabs</a></li>
							<li><a class="dropdown-item" href="elements-icons.html">Icons</a></li>
							<li><a class="dropdown-item" href="elements-icon-boxes.html">Icon Boxes</a></li>
							<li><a class="dropdown-item" href="elements-carousels.html">Carousels</a></li>
							<li><a class="dropdown-item" href="elements-modals.html">Modals</a></li>
							<li><a class="dropdown-item" href="elements-lightboxes.html">Lightboxes</a></li>
						</ul>
					</div>
					<div class="col-lg-3">
						<span class="dropdown-mega-sub-title">Elements 2</span>
						<ul class="dropdown-mega-sub-nav">
							<li><a class="dropdown-item" href="elements-buttons.html">Buttons</a></li>
							<li><a class="dropdown-item" href="elements-badges.html">Badges</a></li>
							<li><a class="dropdown-item" href="elements-lists.html">Lists</a></li>
							<li><a class="dropdown-item" href="elements-image-gallery.html">Image Gallery</a></li>
							<li><a class="dropdown-item" href="elements-image-frames.html">Image Frames</a></li>
							<li><a class="dropdown-item" href="elements-testimonials.html">Testimonials</a></li>
							<li><a class="dropdown-item" href="elements-blockquotes.html">Blockquotes</a></li>
							<li><a class="dropdown-item" href="elements-word-rotator.html">Word Rotator</a></li>
						</ul>
					</div>
					<div class="col-lg-3">
						<span class="dropdown-mega-sub-title">Elements 3</span>
						<ul class="dropdown-mega-sub-nav">
							<li><a class="dropdown-item" href="elements-call-to-action.html">Call to Action</a></li>
							<li><a class="dropdown-item" href="elements-pricing-tables.html">Pricing Tables</a></li>
							<li><a class="dropdown-item" href="elements-tables.html">Tables</a></li>
							<li><a class="dropdown-item" href="elements-progressbars.html">Progress Bars</a></li>
							<li><a class="dropdown-item" href="elements-counters.html">Counters</a></li>
							<li><a class="dropdown-item" href="elements-sections-parallax.html">Sections &amp; Parallax</a></li>
							<li><a class="dropdown-item" href="elements-tooltips-popovers.html">Tooltips &amp; Popovers</a></li>
							<li><a class="dropdown-item" href="elements-sticky-elements.html">Sticky Elements</a></li>
						</ul>
					</div>
					<div class="col-lg-3">
						<span class="dropdown-mega-sub-title">Elements 4</span>
						<ul class="dropdown-mega-sub-nav">
							<li><a class="dropdown-item" href="elements-headings.html">Headings</a></li>
							<li><a class="dropdown-item" href="elements-dividers.html">Dividers</a></li>
							<li><a class="dropdown-item" href="elements-animations.html">Animations</a></li>
							<li><a class="dropdown-item" href="elements-medias.html">Medias</a></li>
							<li><a class="dropdown-item" href="elements-maps.html">Maps</a></li>
							<li><a class="dropdown-item" href="elements-arrows.html">Arrows</a></li>
							<li><a class="dropdown-item" href="elements-alerts.html">Alerts</a></li>
							<li><a class="dropdown-item" href="elements-posts.html">Posts</a></li>
						</ul>
					</div>
				</div>
			</div>
		</li>
	</ul>
</li>

Then you should add this custom css at (css/custom.css):

@media(min-width: 992px) {
	.custom-dropdown-mega > .dropdown-menu {
	    width: calc(100vw - 60px) !important;
	    left: 50% !important;
	    transform: translate3d(-50%, 0, 0) !important;
	}
}

WE hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[ulmayer]

Hi Rodrigo, I built the page as described, but unfortunately it doesn’t work.
https://www.lunasol.de/2021/muster_05_old.php

---

[Support]

Hello,

As I mentioned before, you can have a similar structure, like a mega menu with 4 columns. Note you can change the content of each column. For example, you can add images inside the columns like in the example you sent on start of this ticket.

Unfortunately the animation effect (moving from top to bottom smooth) is something Porto does not comes.

We hope this helps and clarify!

Let us know if you have more questions.

Kind Regards,

Rodrigo.

---

[Author]

Posts