Vermeld in iedere vraag duidelijk:
- De versie van Joomla! 3.X die je gebruikt
- De volledige url van je website indien mogelijk.
- De versie van de extensie waar de vraag over gaat.
Submenu komt onder footer
Submenu komt onder footer
27 okt 2016 05:33
Op mijn pagina maak ik gebruik van een aantal categorieën die nogal wat aparte artikelen bevatten. Omwille van de overzichtelijkheid wil ik dit niet wijzigen.
Bij mijn (gekochte) template van BT had ik echter maar een beperkte ondersteuning vandaar dat ik de vraag hier stel, of ik moest weer het volledige bedrag neertellen en voor een hobby, wordt dit mij dan toch te gek.
Wanneer ik in het navigatiemenu een subcategorie open, vallen de laatste links weg onder de footer. Ik neem aan dat dit met een simpel script op te lossen is, maar daar heb ik weinig kaas van gegeten. Wat mij betreft, zo het zelfs fijner zijn als het submenu gewoon in de breedte verder gaat, wanneer de onderzijde van de startpagina bereikt wordt.
Zijn er hier mensen die mij daarmee kunnen helpen en dat ook willen doen?
Bij mijn (gekochte) template van BT had ik echter maar een beperkte ondersteuning vandaar dat ik de vraag hier stel, of ik moest weer het volledige bedrag neertellen en voor een hobby, wordt dit mij dan toch te gek.
Wanneer ik in het navigatiemenu een subcategorie open, vallen de laatste links weg onder de footer. Ik neem aan dat dit met een simpel script op te lossen is, maar daar heb ik weinig kaas van gegeten. Wat mij betreft, zo het zelfs fijner zijn als het submenu gewoon in de breedte verder gaat, wanneer de onderzijde van de startpagina bereikt wordt.
Zijn er hier mensen die mij daarmee kunnen helpen en dat ook willen doen?
- Peatsmoke
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 52
- Juliank92
-
- Algemeen Moderator
-
- Berichten: 1722
Submenu komt onder footer
27 okt 2016 08:12 - 27 okt 2016 08:13
Onderstaande code komt uit het megamenu-responsive.css
Ik neem aan dat dat stukje code waarnaar jij verwijst daarin zou moeten komen. Het vervangen van de selectors, begrijp ik wel, maar praktisch zou ik echt niet weten welke stukken dat zijn en hoe dat zou moeten gaan?
Het onderstaande stuk code komt uit megamenu.css van mijn site. Mogelijk dat je hier wat meer aan hebt, want om zelf dat stukje aan te passen en met selectors te gaan weren, lijkt mij (in mijn geval) niet zo goed plan, want ik vrees dat dit misgaat...
Ik neem aan dat dat stukje code waarnaar jij verwijst daarin zou moeten komen. Het vervangen van de selectors, begrijp ik wel, maar praktisch zou ik echt niet weten welke stukken dat zijn en hoe dat zou moeten gaan?
Code:
@media (max-width: 767px) {
.t3-megamenu .mega-inner {
padding: 10px 20px;
}
.t3-megamenu .row-fluid,
.t3-megamenu .mega-dropdown-menu,
.t3-megamenu .row-fluid [class*="span"] {
width: 100% !important;
min-width: 100% !important;
left: 0 !important;
margin-left: 0 !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
}
.t3-megamenu .row-fluid + .row-fluid {
padding-top: 10px;
border-top: 1px solid #eee;
}
.t3-megamenu .hidden-collapse,
.t3-megamenu .always-show .caret,
.t3-megamenu .sub-hidden-collapse > .nav-child,
.t3-megamenu .sub-hidden-collapse .caret,
.t3-megamenu .sub-hidden-collapse > a:after,
.t3-megamenu .always-show .dropdown-submenu > a:after {
display: none !important;
}
.t3-megamenu .mega-caption {
display: none !important;
}
html[dir="rtl"] .t3-megamenu .row-fluid,
html[dir="rtl"] .t3-megamenu .mega-dropdown-menu,
html[dir="rtl"] .t3-megamenu .row-fluid [class*="span"] {
right: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 767px) {
.t3-megamenu {
}
.t3-megamenu .mega-inner {
padding: 10px 20px;
}
.t3-megamenu .row-fluid + .row-fluid {
border-top: 1px solid #999;
}
.t3-megamenu .span12.mega-col-nav .mega-inner {
padding: 0;
}
.t3-megamenu .t3-module {
margin-bottom: 0;
}
}
Het onderstaande stuk code komt uit megamenu.css van mijn site. Mogelijk dat je hier wat meer aan hebt, want om zelf dat stukje aan te passen en met selectors te gaan weren, lijkt mij (in mijn geval) niet zo goed plan, want ik vrees dat dit misgaat...
Code:
.t3-megamenu .mega-inner {
padding: 10px;
*zoom: 1;
}
.t3-megamenu .mega-inner:before,
.t3-megamenu .mega-inner:after {
display: table;
content: "";
line-height: 0;
}
.t3-megamenu .mega-inner:after {
clear: both;
}
.t3-megamenu .row-fluid + .row-fluid {
padding-top: 10px;
border-top: 1px solid #eee;
}
.t3-megamenu .mega > .mega-dropdown-menu {
min-width: 200px;
display: none;
}
.t3-megamenu .mega.open > .mega-dropdown-menu,
.t3-megamenu .mega.dropdown-submenu:hover > .mega-dropdown-menu {
display: block;
}
.t3-megamenu .mega-group {
*zoom: 1;
}
.t3-megamenu .mega-group:before,
.t3-megamenu .mega-group:after {
display: table;
content: "";
line-height: 0;
}
.t3-megamenu .mega-group:after {
clear: both;
}
.t3-megamenu .mega-nav .mega-group > .mega-group-title,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {
background: inherit;
color: inherit;
font-weight: bold;
padding: 0;
margin: 0;
}
.t3-megamenu .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .mega-nav .mega-group > .mega-group-title:active,
.t3-megamenu .mega-nav .mega-group > .mega-group-title:focus,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:active,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:focus,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:active,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:focus {
background: inherit;
color: inherit;
}
.t3-megamenu .mega-group-ct {
margin: 0;
padding: 0;
*zoom: 1;
}
.t3-megamenu .mega-group-ct:before,
.t3-megamenu .mega-group-ct:after {
display: table;
content: "";
line-height: 0;
}
.t3-megamenu .mega-group-ct:after {
clear: both;
}
.t3-megamenu .span12.mega-col-nav .mega-inner {
padding: 5px;
}
.t3-megamenu .mega-group .span12.mega-col-nav .mega-inner {
padding: 0;
}
.t3-megamenu .mega-nav,
.t3-megamenu .dropdown-menu .mega-nav {
margin: 0;
padding: 0;
list-style: none;
}
.t3-megamenu .mega-nav > li,
.t3-megamenu .dropdown-menu .mega-nav > li {
list-style: none;
margin-left: 0;
}
.t3-megamenu .mega-nav > li a,
.t3-megamenu .dropdown-menu .mega-nav > li a {
white-space: normal;
}
.t3-megamenu .mega-group > .mega-nav,
.t3-megamenu .dropdown-menu .mega-group > .mega-nav {
margin-left: -5px;
margin-right: -5px;
}
.t3-megamenu .mega-nav .dropdown-submenu > a::after {
margin-right: 5px;
}
.t3-megamenu .t3-module {
margin-bottom: 10px;
}
.t3-megamenu .t3-module .module-title {
margin-bottom: 0;
}
.t3-megamenu .t3-module .module-ct {
margin: 0;
padding: 0;
}
.t3-megamenu .mega-align-left > .dropdown-menu {
left: 0;
}
.t3-megamenu .mega-align-right > .dropdown-menu {
left: auto;
right: 0;
}
.t3-megamenu .mega-align-center > .dropdown-menu {
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
}
.t3-megamenu .dropdown-submenu.mega-align-left > .dropdown-menu {
left: 100%;
}
.t3-megamenu .dropdown-submenu.mega-align-right > .dropdown-menu {
left: auto;
right: 100%;
}
.t3-megamenu .mega-align-justify {
position: static;
}
.t3-megamenu .mega-align-justify > .dropdown-menu {
left: 0;
margin-left: 0;
top: auto;
}
.t3-megamenu .mega-caption {
display: block;
white-space: nowrap;
}
.t3-megamenu .nav .caret,
.t3-megamenu .dropdown-submenu .caret,
.t3-megamenu .mega-menu .caret {
display: none;
}
.t3-megamenu .nav > .dropdown > .dropdown-toggle .caret {
display: inline-block;
}
.t3-megamenu .nav [class^="icon-"],
.t3-megamenu .nav [class*=" icon-"] {
margin-right: 5px;
}
@media (min-width: 768px) {
.t3-megamenu.animate .mega > .mega-dropdown-menu {
transition: all 400ms;
-webkit-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 0;
}
.t3-megamenu.animate .mega.animating > .mega-dropdown-menu {
display: block !important;
}
.t3-megamenu.animate .mega.open > .mega-dropdown-menu,
.t3-megamenu.animate .mega.animating.open > .mega-dropdown-menu {
opacity: 1;
}
.t3-megamenu.animate.zoom .mega > .mega-dropdown-menu {
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transform-origin: 20% 20%;
-moz-transform-origin: 20% 20%;
transform-origin: 20% 20%;
}
.t3-megamenu.animate.zoom .mega.open > .mega-dropdown-menu {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.t3-megamenu.animate.zoom .level0 > .mega-align-center > .mega-dropdown-menu {
-webkit-transform: scale(0,0) translate(-50%,0);
-ms-transform: scale(0,0) translate(-50%,0);
transform: scale(0,0) translate(-50%,0);
-webkit-transform-origin: 0% 20%;
-moz-transform-origin: 0% 20%;
transform-origin: 0% 20%;
}
.t3-megamenu.animate.zoom .level0 > .mega-align-center.open > .mega-dropdown-menu {
-webkit-transform: scale(1,1) translate(-50%,0);
-ms-transform: scale(1,1) translate(-50%,0);
transform: scale(1,1) translate(-50%,0);
}
.t3-megamenu.animate.elastic .mega > .mega-dropdown-menu {
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
-ms-transform: scale(0, 1);
-o-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 10% 0;
-moz-transform-origin: 10% 0;
transform-origin: 10% 0;
}
.t3-megamenu.animate.elastic .mega.open > .mega-dropdown-menu {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.t3-megamenu.animate.elastic .level0 > .mega > .mega-dropdown-menu {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
.t3-megamenu.animate.elastic .level0 .open > .mega-dropdown-menu {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.t3-megamenu.animate.elastic .level0 > .mega-align-center > .mega-dropdown-menu {
transform: scale(1,0) translate(-50%,0);
-ms-transform: scale(1,0) translate(-50%,0);
-webkit-transform: scale(1,0) translate(-50%,0);
}
.t3-megamenu.animate.elastic .level0 > .mega-align-center.open > .mega-dropdown-menu {
transform: scale(1,1) translate(-50%,0);
-ms-transform: scale(1,1) translate(-50%,0);
-webkit-transform: scale(1,1) translate(-50%,0);
}
.t3-megamenu.animate.slide {
}
.t3-megamenu.animate.slide .mega {
}
.t3-megamenu.animate.slide .mega.animating > .mega-dropdown-menu {
overflow: hidden;
}
.t3-megamenu.animate.slide .mega > .mega-dropdown-menu > div {
transition: all 400ms;
-webkit-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
margin-top: -100%;
}
.t3-megamenu.animate.slide .mega.open > .mega-dropdown-menu > div {
margin-top: 0%;
}
.t3-megamenu.animate.slide .mega .mega > .mega-dropdown-menu {
min-width: 0;
}
.t3-megamenu.animate.slide .mega .mega > .mega-dropdown-menu > div {
min-width: 200px;
margin-top: 0;
margin-left: -500px;
}
.t3-megamenu.animate.slide .mega .mega.open > .mega-dropdown-menu > div {
margin-left: 0;
}
}
.t3-megamenu {
}
.t3-megamenu .mega-inner {
padding: 20px;
}
.t3-megamenu .row-fluid + .row-fluid {
border-top: 1px solid #ddd;
}
.t3-megamenu .mega-nav .mega-group > .mega-group-title,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {
background: inherit;
color: #222;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.t3-megamenu .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .mega-nav .mega-group > .mega-group-title:active,
.t3-megamenu .mega-nav .mega-group > .mega-group-title:focus,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:active,
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:focus,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:hover,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:active,
.t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:focus {
background: inherit;
color: #222;
}
.t3-megamenu .mega-nav .dropdown-submenu > a::after {
margin-right: 0;
}
.t3-megamenu .t3-module .module-title {
font-size: 14px;
color: #222;
display: block;
line-height: 20px;
margin-bottom: 5px;
}
.t3-megamenu .t3-module ul,
.t3-megamenu .t3-module .nav {
margin: 0 0 0 15px;
}
.t3-megamenu .t3-module ul li,
.t3-megamenu .t3-module .nav li {
list-style: disc;
display: list-item;
float: none;
margin: 0;
padding: 0;
border: 0;
}
.t3-megamenu .t3-module ul li a,
.t3-megamenu .t3-module .nav li a {
display: inline;
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
background: none;
font: inherit;
white-space: normal;
}
.t3-megamenu .t3-module ul li a:hover,
.t3-megamenu .t3-module ul li a:focus,
.t3-megamenu .t3-module ul li a:active,
.t3-megamenu .t3-module .nav li a:hover,
.t3-megamenu .t3-module .nav li a:focus,
.t3-megamenu .t3-module .nav li a:active {
background: none;
color: inherit;
font: inherit;
}
.t3-megamenu .mega-caption {
color: #999;
font-size: 10px;
margin-top: 3px;
font-weight: normal;
}
- Peatsmoke
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 52
