Guten Tag,
ich habe eine Designvorlage mit einem schönen Mainmenü.
Nur fehlen dort im Submenü mehrere Spalten, die ich mit Max Mega Menü bereits hinbekommen habe.
Nur hat das Plugin sein eigenes Design eingebracht.
Es gibt die Möglichkeit ein Custom CSS anzulegen. Dazu ist unter dem folgenden Link ein entsprechendes Codegefüge vorhanden, dass ich einfach einfügen kann.
https://docs.generatepress.com/article/building-simple-mega-menu/
Nun muss dieser aber so angepasst werden, dass die Vorlagendefinition zumindest vom optischen auch bei mehreren Spalten bleibt.
Dazu ist in der style.css folgender Code vorhanden, der irgendwie entsprechend in den verlinken zu integrieren wäre.
Hier bin ich überfragt und hoffe es gibt hier einen Sachkundigen, der mir einen Lösungsweg aufzeigen kann.
/*Main nav*/
#main-nav.fixed {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
#main-nav {
background: #083a6f;
padding: 5px 0;
}
.main-navigation ul {
display: block;
margin: 0;
padding: 0;
}
.main-navigation ul ul {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 225px;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
display: block;
background-color: #ffffff;
transition: all 0.2s ease-in-out 0.1s;
padding: 0 25px;
}
.main-navigation ul li:hover > ul.sub-menu{
display: block;
opacity: 1;
z-index: 1000;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
transition: all 0.4s ease-in-out 0.1s;
}
.main-navigation ul ul ul {
left: 114%;
top: 0;
border-left: 1px solid #f7f7f76b;
}
.main-navigation li {
display: inline-block;
float: left;
margin-bottom: 0;
position: relative;
padding: 15px 22px;
}
.main-navigation li li {
float: none;
display: block;
padding:0;
}
.main-navigation li:first-child {
padding-left: 0;
}
.main-navigation ul li li:first-child > a {
border-left: none;
}
.main-navigation ul li a {
color: #ececec;
display: block;
font-size: 17px;
position: relative;
z-index: 99;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
.main-navigation ul ul a {
border-bottom: 1px solid rgba(221, 221, 221, 0.12);
border-left: medium none;
border-right: medium none;
height: auto;
text-align: left;
width: 100%;
font-size: 15px;
padding: 12px 0;
text-transform: capitalize;
font-weight: 500;
color: #323232;
}
.main-navigation ul ul li:last-child a {
border: none;
}
.main-navigation ul li.menu-item-has-children > a::after,
.main-navigation ul li.page_item_has_children > a::after {
content: "\f0dd ";
margin-left: 10px;
margin-right: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
font-family: FontAwesome;
}
.main-navigation ul li li.menu-item-has-children > a::after,
.main-navigation ul li li.page_item_has_children > a::after {
top: 15px;
content: "\f0da";
}
.main-navigation ul li.menu-item-has-children > a,
.main-navigation ul li.page_item_has_children > a {
padding-right: 15px;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li:hover > a {
color: #ffffff;
}
.main-navigation ul li.current-menu-item > a:before,
.main-navigation ul li.current_page_item > a:before,
.main-navigation ul li a:hover:before,
.main-navigation ul li:hover > a:before {
content: "";
display: block;
height: 2px;
background: #fff;
position: absolute;
bottom: -18px;
width: 100%;
}
.main-navigation ul li li.current-menu-item > a:before,
.main-navigation ul li li.current_page_item > a:before,
.main-navigation ul li li a:hover:before,
.main-navigation ul li li:hover > a:before {
display: none;
}
.main-navigation ul ul li a:hover,
.main-navigation ul ul li.current-menu-item a,
.main-navigation ul ul li.current_page_item a,
.main-navigation ul ul li:hover > a {
color: #3770ab;
}
.main-navigation .menu-toggle,
.main-navigation .dropdown-toggle {
display: none;
}is there a Person who knows what i have to copy and paste for that in the custom css from link?
king regards
jan
Edit maxe: Code-Button