Mega Menu

https://prnt.sc/uxeea4

https://prnt.sc/uxegi4

1) Your page is currently not loading for me, therefore I cannot provide you the CSS for that.

2) Use this CSS to colorize the active menu link:

#primary-menu .current-menu-item a,
#primary-menu .current_page_item a {
  color: red;
}

Kodlar? ?zelle?tiriciye ekledim

I added the codes to the customizer

I took a look at the demo pages mega menu. With the built in mega menu it is not (easy) possible to align the mega menu in the middle of its menu item. Furthermore positioning it outside of the normal content width it could be cut off on some viewports. Therefore I can’t assist you with that one.
You could try a mega menu plugin instead, if you really need this.

While the current mega menu has 8 elements, the new mega menu will have 3 elements (250x250px). I will remove the previous available mega menu. The total width will be 75%. Is this not possible?

You can try this CSS and see what I mean:

#main-nav .mega-menu .sub-menu {
	visibility: visible;
	opacity: 1;
	width: 75%;
	left: 32% !important;
}
#main-nav .mega-menu > .sub-menu > li {
  width: 33%;
}

This makes it less width for only 3 items and the items smaller. However, when you resize your window, there will be some viewports where the menu gets outside of your window, creating a horizontal scrollbar.
You might find a way with setting @media queries, however this is beyond my support.

First of all, thank you very much for your wonderful support,

? Menu window 60%, arranged by taking it into the container. But is it possible to view images 200x200px?

? Mega menu remains open and fixed. It doesn’t open with Hover.

But is it possible to view images 200x200px?

You have this CSS somewhere (I guess in the Customizer):

#mobile-menu .mega-menu .sub-menu li:nth-of-type(3) a::before, #main-nav .mega-menu .sub-menu li:nth-of-type(3) a::before {
	content: "";
	background-image: url('https://tuyograf.com/medya/2020/10/menu-grafik-tasarim.jpg');
	background-size: cover;
	display: block;
	padding-top: 60%;
	margin: 0 0 20px;
}

Change the padding-top to 100% for all items to show the images in 200×200 pixel.

Mega menu remains open and fixed. It doesn’t open with Hover.

Remove

	visibility: visible;
	opacity: 1;

from the last code I gave you for the menu width (#main-nav .mega-menu .sub-menu). I used it to test the CSS rules, it wasn’t ment to be used in the real page.

• This reply was modified 4 years, 1 month ago by terrathemes.

Yes, it was what I wanted. Thank you, you are number one ))