Mega Menu

Advanced Search

Two Mega Menus on one page with Custom CSS possible?

Permalink Browser Info Environment
Is it possible to have two Mega Menus on the same page, each with a Custom CSS?
Type: Discussion
Status: In Progress
gyanacollections
View Replies:
jb1 replied on at Permalink Reply
jb1
Hi

Good question. It should be possible if you use a specific ID attribute for the container of the Menushttp://www.w3schools.com/cssref/sel_id.asp... and use that to identify uniquely int the custom css text area.

Does that help?

JZ
gyanacollections replied on at Permalink Reply
gyanacollections
This is not working but perhaps I don't understand fully...

I tried putting this in the Custom CSS of the block:

Block #1

/* Submenu Container Styles */
#id {
    01;
}
.jbmm.custom ul.mega-menuh li .sub-container {position: absolute; padding: 20px; margin-left: 0px; margin-top:0px; background-color:#ffffff; letter-spacing: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega {padding-left: 20px; padding-top:0px;}
.jbmm.custom ul.mega-menuh li .sub {padding: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega .sub {padding: 20px 10px 10px 0;}
.jbmm.custom ul.mega-menuh li .sub .row {width: 100%; overflow: hidden; clear: both;}
.jbmm.custom ul.mega-menuh li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;}


Block #2

/* Submenu Container Styles */
#id {
    02;
}
.jbmm.custom ul.mega-menuh li .sub-container {position: absolute; padding: 20px; margin-left: 0px; margin-top:0px; background-color:#ffffff; letter-spacing: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega {padding-left: 20px; padding-top:0px;}
.jbmm.custom ul.mega-menuh li .sub {padding: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega .sub {padding: 20px 10px 10px 0;}
.jbmm.custom ul.mega-menuh li .sub .row {width: 100%; overflow: hidden; clear: both;}
.jbmm.custom ul.mega-menuh li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;}
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Try it like this
/* Submenu Container Styles Block 1 */
#01 {
.jbmm.custom ul.mega-menuh li .sub-container {position: absolute; padding: 20px; margin-left: 0px; margin-top:0px; background-color:#ffffff; letter-spacing: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega {padding-left: 20px; padding-top:0px;}
.jbmm.custom ul.mega-menuh li .sub {padding: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega .sub {padding: 20px 10px 10px 0;}
.jbmm.custom ul.mega-menuh li .sub .row {width: 100%; overflow: hidden; clear: both;}
.jbmm.custom ul.mega-menuh li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;}


/* Submenu Container Styles Block 2 */
#02 {
.jbmm.custom ul.mega-menuh li .sub-container {position: absolute; padding: 20px; margin-left: 0px; margin-top:0px; background-color:#ffffff; letter-spacing: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega {padding-left: 20px; padding-top:0px;}
.jbmm.custom ul.mega-menuh li .sub {padding: 0px;}
.jbmm.custom ul.mega-menuh li .sub-container.mega .sub {padding: 20px 10px 10px 0;}
.jbmm.custom ul.mega-menuh li .sub .row {width: 100%; overflow: hidden; clear: both;}
.jbmm.custom ul.mega-menuh li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;}
nrh replied on at Permalink Reply
nrh
Hmmm. Not working. I should mention that the attribute I want to adjust is the font spacing.

Using your method if I adjust the letter-spacing it adjusts it for both blocks, but I want each to have their own values.

Here's my whole Custom CSS:

/* General Styles */
.mega-menuh ul, .mega-menuh ul li {list-style: none;}
.mega-menuh ul {position: relative; padding: 0; margin: 0;}
.mega-menuh ul li ul {display: none;}
.mega-menuh .sub {display: none;}
.mega-menuh .sub ul {display: block;}
/* Font Styles */
.jbmm.custom {font: normal 13px Lato, sans-serif; !important; line-height: 16px !important; height:40px; letter-spacing: 12.5px;}
.jbmm.custom ul.mega-menuh, .jbmm.custom ul.mega-menuh, .jbmm.custom ul.mega-menuh li {margin: 0; padding: 0; border: none;}
/* Background Styles */
.jbmm.custom ul.mega-menuh {background: #fff; width: 100%; height: 40px; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; position: relative;}
.jbmm.custom ul.mega-menuh li {float: left; margin: 0; padding: 0; font-size: 13px !important;}
/* Link Styles */
.jbmm.custom ul.mega-menuh li a {float: left; display: block; color: #000 !important; padding: 10px 40px 10px 40px !important; text-shadow: 1px 1px 1px #fff; font-weight: 300; text-decoration: none; !important;}
.jbmm.custom ul.mega-menuh li a.dc-mega {position: relative; padding: 10px 40px 10px 40px !important;}
Viewing 15 lines of 42 lines. View entire code block.
jb1 replied on at Permalink Reply
jb1
Hi

If you have set an ID in the menu container like this:

<div id="mega-menu">


You can style it like this"

#mega-menu ul.mega-menu li { /*some rules here*/ }
#mega-menu ul.mega-menu li .sub-container { /*some rules here*/ }


Does that make sense?

JZ

concrete5 Environment Information

# concrete5 Version
5.6.3.1

# concrete5 Packages
Automatic Email Obfuscator (1.2.3), Dynamic Iframe (1.7), eCommerce (2.8.12), Expand / Collapse (1.2.6), Iframe (1.0), Mega Menu (1.5.30), Popup (1.34), Shopify (1.0.2), tnSpacer (1.3), Zoom Image (1.0.5).

# concrete5 Overrides
elements/product, js/music.js, js/loader.js, languages/sv_SE, languages/es_PE, languages/de_DE, languages/fi_FI, languages/he_IL, languages/ro_RO, languages/tr_TR, languages/ja_JP, languages/fr_FR, languages/pt_PT, languages/sk_SK, languages/es_AR, languages/vi_VN, languages/sl_SI, languages/nl_NL, languages/fa_IR, languages/nb_NO, languages/el_GR, languages/zh_CN, languages/es_MX, languages/cs_CZ, languages/ru_RU, languages/ar, languages/it_IT, languages/es_ES, languages/zh_TW, languages/da_DK, models/core_commerce, themes/blankwide, themes/blankthin, themes/blank, themes/blankstore

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off

# Server Software
Apache mod_fcgid/2.3.10-dev

# Server API
cgi-fcgi

# PHP Version
5.4.31

# PHP Extensions
apc, bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imagick, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, Zend Guard Loader, zip, zlib.

# PHP Settings
max_execution_time - 120
apc.max_file_size - 1M
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 64M
post_max_size - 48M
sql.safe_mode - Off
upload_max_filesize - 32M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 10000000
pcre.recursion_limit - 10000000
session.cache_limiter - nocache
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.