Forums

Please could someone help me with V. 5.6.3 mega menu css

Permalink
Hi,
I am not a programmer and I need help trying to center the menu on my page's theme menu area to make it look right and keep the dropdown menu for Dawgz Stuff from running off the right side of the page when it drops down. Some of the dropdown links are cut off by the right side of the screen. I will be adding a lot more child pages to that page so it will take up more room yet. OH and can you help me change the font to comic sans?

I have been playing with it and I got the colors changed to my liking and I guess that error thing I asked for help on earlier was because I clicked something wrong, I haven't seen it again. My website is wanderz.us

The code is
/* 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 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: #222; width: 100%; height: 40px; border-right: 1px solid #1B1B1B; border-left: 1px 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;}
Viewing 15 lines of 44 lines. View entire code block.


Thank you for your help. :)

hugs

Wander
 
wanderful replied on at Permalink Reply
Ok I was looking at the edit version and it was off center. It is not off center when I bring up the website itself.

I think I have figured out that I need to use stacks to set up the drop down to make it not go off the edge of the page. I just gotta figure out how to do that.

The video made in 2011 on you tubehttps://www.youtube.com/watch?v=TBDw8uYk048... Mega Menu and how to use it, is saying how to set it up globally. The concrete5 dashboard doesn't look anything like mine in V5.6.3, (I actually like the one in the video better than the one I have) it is saying to go to the scrapbook. There is NOTHING saying scrapbook in my dashboard. just the page type thing that I have to go in and put it on every page type. I would rather do it once and it take care of everything for ALL page types.

Can anyone instruct me please? Thanks so much.

hugs,

Wanda
WillemAnchor replied on at Permalink Reply
WillemAnchor
have a look here:
http://www.concrete5.org/documentation/using-concrete5/dashboard/st...

scrapbooks are not being used anymore
mhawke replied on at Permalink Reply
mhawke
I have no idea why stacks (or scrapbooks in older versions) should be used to fix the mega menu style issues. The reason you would want to use stacks or scrapbooks would be to allow you to place the identical top nav on each page but the better way to fix this would be to change that 'Header Nav' editable area into a 'Global Area' by changing the code in your themes/soul_mate_custom/elements/header.php file at line 42 from :

$menu = new Area('Header Nav');
            $menu->setBlockLimit(1);
            $menu->display($c);


to 
$menu = new GlobalArea('Header Nav');
            $menu->display();


Then visit you Dashboard->Stacks and add your Amiant menu to the 'Header Nav' global stack.

As for menu css itself, this doesn't solve all the issues I see with your nav but try these small changes to see it it gets you closer to what you want.

On line 158 of 'packages/amiant_css3_menu/blocks/amiant_css3_menu/view.css'

change to the 'top:40px' to 'top:35px';

In line 30 of 'themes/sourl_mate_custom/css/main.css'

comment out the width so the line reads:

#menu ul{float:left; /* width:864px; */ margin:0; padding:0 0 0 20px; list-style:none}