Thanks for your purchase.

Ok, if you started with the base (template) CSS code then it should have arrows automatically unless that had been customised and accidently removed by you. Otherwise, there's a slim chance that your theme is interfering with the Mega Menu CSS. I could tell if that's the case if you're able to send me the URL where it's installed.

JB

I kind of fear this is could be theme related. On behalf of my client, I purchase a theme named Baseline (http://www.concrete5.org/marketplace/themes/baseline). Here is a development spot where I'm working on the site: http://ehub48.webhostinghub.com/~phtool5/... The Mega Menu add-on is installed, and the only customization I really made was swapping in the background color to match the background for the autonav area. When I look at the sample website and screen captures for Baseline, there are no arrows.

Any help would be appreciated Would like to use a similar technique as what I saw in play on your website where you show multiple color examples with arrows in the top level and then sideways arrows that appear in the dropdowns.

The answer turns out to be pretty simple. The arrow image can't be found:
http://ehub48.webhostinghub.com/packages/jb_megamenu/blocks/jb_mega...
This is pointing to the top level folder rather than the subfolder you're using. This may be due to the config/site.php file settings in your site.

So you can either check that is ok, or manually add the full URL to the image within your custom CSS (just replace the default URL):
http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/block...

Just search the CSS code for "arrow.png" and you'll find it.

Hope this helps.

JB

Thanks for your willingness to try and sort things out. Unfortunately, when I put in the absolute links you suggested, it made no difference. The one issue I have with Concrete 5 stuff is the overwhelming number of CSS files. Let me tell you what I did, and see if you have other suggestions. I found "custom.css" files in a couple of places in the files for Mega Menu.

One was at this path:
packages/jb_megamenu/blocks/jb_megamenu/css/skins
The other was at this path:
/public_html/packages/jb_megamenu/blocks/jb_megamenu

In both cases I changed the link to arrow.png to be the absolute link you suggested. In fact, I changed ALL calls to any image with "arrow.png" as part of the name. It had no impact.

To me a curious part of this is that the magnifying glass image is coming up just fine in Mega Menu...and it always has. Any other suggestions?

That is strange, have you tried clearing the c5 cache?

JB
On 5 Feb 2016 7:54 pm, "concrete5 Community" <discussions@concretecms.com>
wrote:

Yep, it is strange and frustrating. And I did go into the C5 control panel and cleared the cache...just forgot to mention that. The reason I'm suspicious of the theme is that if you look at the live sample of it, there are no arrows on its navigation. http://baseline57.concrete5gig.com/...

If you'd like to see it, I can send you a copy of the custom.css exactly as I modified it. Note that I can use those absolute links in my browser for the images themselves, and I'm able to see them. But only when singled out by putting something likehttp://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/block... directly into my browser's address line. What really is wacky is that the image for the magnifying glass for the "search" option in the nav line comes up just fine.

Yes, please copy & paste the whole css and I'll check if there's any typos. It should work with the full url. So we'll get to the bottom of this.

Here's the revised "custom.css" code I've got active. You will note that I used an absolute link structure to EVERYTHING that appeared to have anything to do with an "arrow" graphic. If I paste these links directly into my browser, they are found and display on my screen. They just don't come up with the under-construction website.

______________________________________________

.mega-menu ul, .mega-menu ul li {list-style: none;}

.mega-menu ul {position: relative; padding: 0; margin: 0;}

.mega-menu ul li ul {display: none;}

.mega-menu .sub {display: none;}

.mega-menu .sub ul {display: block;}



.custom {font: normal 13px Arial, sans-serif; line-height: 16px;}

.custom ul.mega-menu, .custom ul.mega-menu, .custom ul.mega-menu li {margin: 0; padding: 0; border: none;}

.custom ul.mega-menu {background: #222 url(images/bg_black.png) repeat-x 0 -80px; width: 100%; height: 40px; /*border-right: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B;*/ position: relative;}

.custom ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;}

.custom ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(images/bg_black.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;}

.custom ul.mega-menu li a.dc-mega {position: relative;}

.custom ul.mega-menuh li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px;}

.custom ul.mega-menuh li a .dc-mega-icon.dc-mega-down {background: url(http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow.png) no-repeat 0 0;}

.custom ul.mega-menuh li a .dc-mega-icon.dc-mega-up {background: url(http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_up.png) no-repeat 0 0;}

.custom ul.mega-menu li.mega-hover a, .custom ul.mega-menu li a:hover {background-position: 100% -42px; color: #000; text-shadow: none;}

.custom ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;}

.custom ul.mega-menu li .sub-container {position: absolute; background: url(images/bg_sub_left.png) no-repeat 0 100%; padding-left: 20px; margin-left: -3px;}

.custom ul.mega-menu li .sub {background: url(images/bg_sub.png) no-repeat 100% 100%; padding: 20px 20px 20px 10px;}

.custom ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;}

.custom ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;}

.custom ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;}

.custom ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;}

.custom ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;}

.custom ul.mega-menu li .sub a, .custom ul.mega-menu li .sub span {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}

.custom ul.mega-menu li .sub li.mega-hdr .mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #6B6B6B url(images/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;}

.custom ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;}

.custom ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_off.png) no-repeat 5px 8px; font-weight: normal;}

.custom ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_on.png) no-repeat 5px 8px;}

.custom ul.mega-menu .sub ul li {padding-right: 0;}

.custom ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;}

.custom ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}

.custom ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_off.png) no-repeat 7px 10px;}

.custom ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_on.png) no-repeat 7px 10px;}

Ok, can you try wrapping the URLs to the images within double quotes.
Eg. url("full image path")

If that doesn't solve it, I'll replicate the css file on my end and troubleshoot it.

I've checked your actual page (http://ehub48.webhostinghub.com/~phtool5/) and I can't see your changes in the CSS.

http://screencast.com/t/xOnJnjwKVu...

Here is a screenshot of where I've manually added the "/~phtool5/" to the background image URL and to make the arrow stand out, wrapped it in a red border. It shows up ok there. So somewhere along the line, once you're saving the changes they aren't being reflected on the actual page. Either the page isn't being approved (try that first), or it could be a C5 caching issue or further up the line, a server caching issue (try restarting Apache, or your web server)

Let me know how you go with that.

JB

I tried that, and it didn't make any difference that I can tell. I've copied and pasted the custom.css file below with the changes your asked me to try.

_________________________________

.mega-menu ul, .mega-menu ul li {list-style: none;}

.mega-menu ul {position: relative; padding: 0; margin: 0;}

.mega-menu ul li ul {display: none;}

.mega-menu .sub {display: none;}

.mega-menu .sub ul {display: block;}



.custom {font: normal 13px Arial, sans-serif; line-height: 16px;}

.custom ul.mega-menu, .custom ul.mega-menu, .custom ul.mega-menu li {margin: 0; padding: 0; border: none;}

.custom ul.mega-menu {background: #222 url(images/bg_black.png) repeat-x 0 -80px; width: 100%; height: 40px; /*border-right: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B;*/ position: relative;}

.custom ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;}

.custom ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(images/bg_black.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;}

.custom ul.mega-menu li a.dc-mega {position: relative;}

.custom ul.mega-menuh li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px;}

.custom ul.mega-menuh li a .dc-mega-icon.dc-mega-down {background: url("http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow.png") no-repeat 0 0;}

.custom ul.mega-menuh li a .dc-mega-icon.dc-mega-up {background: url("http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_up.png") no-repeat 0 0;}

.custom ul.mega-menu li.mega-hover a, .custom ul.mega-menu li a:hover {background-position: 100% -42px; color: #000; text-shadow: none;}

.custom ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;}

.custom ul.mega-menu li .sub-container {position: absolute; background: url(images/bg_sub_left.png) no-repeat 0 100%; padding-left: 20px; margin-left: -3px;}

.custom ul.mega-menu li .sub {background: url(images/bg_sub.png) no-repeat 100% 100%; padding: 20px 20px 20px 10px;}

.custom ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;}

.custom ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;}

.custom ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;}

.custom ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;}

.custom ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;}

.custom ul.mega-menu li .sub a, .custom ul.mega-menu li .sub span {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}

.custom ul.mega-menu li .sub li.mega-hdr .mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #6B6B6B url(images/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;}

.custom ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;}

.custom ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url("http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_off.png") no-repeat 5px 8px; font-weight: normal;}

.custom ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url("http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_on.png") no-repeat 5px 8px;}

.custom ul.mega-menu .sub ul li {padding-right: 0;}

.custom ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;}

.custom ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}

.custom ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url("http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_off.png") no-repeat 7px 10px;}

.custom ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url("http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_on.png") no-repeat 7px 10px;}

More than a little confused. If I go to this link for the CSS, I see the code as you told me to change it: http://ehub48.webhostinghub.com/~phtool5/packages/jb_megamenu/block...

So where are things going awry?
You asked me to make sure pages are approved. I did.
You asked me to be sure that cache in C5 is cleared. I did.

If I'm hearing you right, you're saying that I need to go to the hosting company and ask them to restart the server. Is that the size of it?

Ah, I see what's going on. You're customising the wrong thing. That particular file is used as the "base" or default css when you're creating your own custom skin. You should save your custom css code within the menu's block interface (same place you set all the other settings for it). Just look for the large text box for custom css. I think that should get things heading in the right direction.

Ah, I see what's going on. You're customising the wrong thing. That particular file is used as the "base" or default css when you're creating your own custom skin. You should save your custom css code within the menu's block interface (same place you set all the other settings for it). Just look for the large text box for custom css. I think that should get things heading in the right direction.

Sorry to be dense, but CSS is NOT my thing. Where, exactly, is this file I am to modify? Is this a specific file within the packages/jb_megamenu area? If so, what is the name of the file I'm to modify? Or is this the CSS that I can fiddle with within the control panel/settings under the "Edit Mega Menu" I can access within my Concrete5 install? Under the Color...Skin Type..I have a Custom (Advanced) pane that lets me adjust some CSS.

Sorry to be such a dunce about this, but I truly have no idea where to look for this "large text box for custom CSS."

Yes, you're on the right track.

Here's one of the screenshots from the Mega Menu marketplace listing:
http://www.concrete5.org/files/4714/4680/8321/jb_megamenu_screensho...
This is the "display" tab within the editor interface for Mega Menu. To get here just click the Mega Menu block while your page is in edit mode. If you scroll down to the bottom of this tab then you'll find a large area for text where your custom CSS goes. Everything you want to customise goes in there (not a separate CSS file).

Sorry...just not seeing it. See attached grab I have from the Display tab I have when I to to edit my Mega Menu settings. There is no "large text" area to which I can add anything.

Under the Color tab (capture also attached), I have a section containing a text area for Custom CSS. So is this where you are saying I should put the changes to cause the arrows to appear? Presently, here is what's in this area:

/* 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: none;}

/* Font Styles */
.jbmm.custom {font: normal 13px Arial, sans-serif !important; line-height: 16px !important; height:40px;}
.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: #0667A6; width: 100%; height: 40px; border-right: 0px solid #1B1B1B; border-left: 0px solid #1B1B1B; position: relative;}
.jbmm.custom ul.mega-menuh li {float: left; margin: 0; padding: 0; font-size: 13px !important; font-weight: bold;}

/* Link Styles */
.jbmm.custom ul.mega-menuh li a {float: left; display: block; color: #fff !important; padding: 13px 28px 14px 25px !important; text-shadow: 1px 1px 1px #000; text-decoration: none !important;}
.jbmm.custom ul.mega-menuh li a.dc-mega {position: relative; padding: 13px 38px 14px 25px !important;}

/* Link Icon Styles (i.e. Arrow Icon) */
.jbmm.custom ul.mega-menuh li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow.png) no-repeat 0 0;}

/* Top Level Styles */
.jbmm.custom li.top-level-nav.mega-hover a, .jbmm.custom li.top-level-nav a:hover{background-color:#efefef;}
.jbmm.custom > ul li.nav-path-selected a, .jbmm.custom > ul li.nav-selected a{background-color:#ccc;}

/* Hover Styles */
.jbmm.custom ul.mega-menuh li.mega-hover a, .jbmm.custom ul.mega-menuh li a:hover {background-position: 100% -40px; color: #333 !important; text-shadow: none;}
.jbmm.custom ul.mega-menuh li.mega-hover a .dc-mega-icon {background-position: 0 100%;}

/* Submenu Container Styles */
.jbmm.custom ul.mega-menuh li .sub-container {position: absolute; padding: 20px; margin-left: 0px; margin-top:0px; background-color:#efefef;}
.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 Row Header Styles */
.jbmm.custom ul.mega-menuh li .sub li.mega-hdr {margin: 0 10px 10px 0 !important; float: left;}
.jbmm.custom ul.mega-menuh li .sub li.mega-hdr.last {margin-right: 0;}
.jbmm.custom ul.mega-menuh li .sub a, .jbmm.custom ul.mega-menuh li .sub span {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}
.jbmm.custom ul.mega-menuh li .sub li.mega-hdr .mega-hdr-a {padding: 5px 5px 5px 15px !important; margin-bottom: 5px; background-color: #6B6B6B !important; text-transform: uppercase; font-weight: bold; color: #fff !important; text-shadow: 1px 1px 1px #333;}
.jbmm.custom ul.mega-menuh li .sub li.mega-hdr a.mega-hdr-a:hover {color: #ccc; text-shadow: none;}
.jbmm.custom ul.mega-menuh .sub li.mega-hdr li a {padding: 4px 5px 4px 20px !important; background: url(/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_off.png) no-repeat 5px 8px; font-weight: normal;}
.jbmm.custom ul.mega-menuh .sub li.mega-hdr li a:hover {color: #a32403 !important; background: #ccc url(/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_on.png) no-repeat 5px 8px !important;}
.jbmm.custom ul.mega-menuh .sub ul li {padding-right: 0;}

/* Submenu Container with only 1 Level (no row headers) Styles */
.jbmm.custom ul.mega-menuh li .sub-container.non-mega .sub { }
.jbmm.custom ul.mega-menuh li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}
.jbmm.custom ul.mega-menuh li .sub-container.non-mega li a {padding: 7px 5px 7px 22px !important; background: url(/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_off.png) no-repeat 7px 10px;}
.jbmm.custom ul.mega-menuh li .sub-container.non-mega li a:hover {color: #a32403; background: #ccc url(/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/arrow_on.png) no-repeat 7px 10px !important;}

Yes that is the correct field. Sorry I should have mentioned "colour" tab, not "display". Sorry for the confusion. All your custom CSS code goes right in there where you've mentioned.

All right, so it seems that we might be getting close. At present in the custom CSS that is there, I find such things as /* General Styles */ or /* Submenu Container Styles */. So do I just go to the bottom of all this stuff and copy and paste all the previous CSS code that you and I have batted about? I won't recreate that here since it's already posted in previous posts. Just don't know where to put it...or if it matters. And is there any part of what's already there that needs to go away?

Again, sorry to be such a dolt about this.

The default content of that field is the suggested baseline for your custom-skinned mega menu. It's a starting point so you don't have to create it from scratch. You can change any of that default content. This is the only field where you should make any changes to the menu. If you start tinkering under the hood and change CSS files directly then they would be overwritten next time you upgrade the add-on.

All your custom CSS code should go in here. You can try copying in your existing changes, but I'd suggest backing up the existing content in that field in case you accidently break something.

Finally! Thanks for your persistence and patience. Awesome. Indulge me for one more thing. See attached image. I spent time looking at your support/info site for all your products before purchasing. I like the second-level arrows you show on your examples. How do I get those? Do you think it might be a good idea to post some sample CSS code to show how you achieve some of the very rich possibilities for this product for dummies like me?

Glad to hear, thanks for your feedback.
The 2nd level bullet points can be copied from one of the default skins. Each skin has its own css file within the package and you can copy relevant code from there.

Even though I provide support for our addons I have to draw a line somewhere and that line is customisation and training. Those are paid services. So developers who know css are able to tinker as much as they want. But for someone who needs css/php/html/JavaScript training, then there are free resources on the Internet or I can provide paid one-to-one training via Skype.

The default custom skin code is a very handy starting point when developers want to make the menu look a certain way. Or the standard skins are for non-developers who want point and click ease.

I hope this helps to clarify things.

JB