Results 1 to 4 of 4

Thread: How to make DD Mega Menu (.solidblockmenu) 100% width?

  1. #1
    Join Date
    Nov 2012
    Thanked 0 Times in 0 Posts

    Default How to make DD Mega Menu (.solidblockmenu) 100% width?


    1) Script Title: : DD Mega Menu

    2) Script URL (on DD):

    3) Problem: How can I make the DD Mega Menu (.solidblockmenu) 100% width within the CCS code? Can the .solidblockmenu be set at 100% or just in px? My Website is set at 100% width.

  2. #2
    Join Date
    Jan 2008
    Thanked 628 Times in 624 Posts
    Blog Entries


    I'm confused with what you're asking. From what I can tell, by default the menu should already be set to 100%. Additionally, if you wanted 100% width, why would you think to set the width in pixels?

    Could you be a bit more clear on what you're asking, please? Maybe provide a link to the page where the menu doesn't fill up 100% of its parent container?

  3. #3
    Join Date
    Jul 2008
    Derbyshire, UK
    Thanked 599 Times in 575 Posts
    Blog Entries


    Maybe you mean the .megawrapper container that holds the dropdowns? - it is generated in the JavaScript and not specifically declared/referenced in the default CSS.

    You can manipulate that in the CSS though if you use the !important override - something like;
    .megawrapper { position:absolute !important; top:100px !important; left:0 !important; width:100% !important; }
    This example makes the dropdowns all come from the absolute left of the screen, 100px from the top, instead of from under each button.

    I did something similar for the megamenu that I used in the Fast Edit website except I declared a specific px width to match the wrapper of the template. This may or may not point you in the right direction but further clarification and a link, as Nile has already mentioned, would be the best way to offer you specific help.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. #4
    Join Date
    Nov 2012
    Thanked 0 Times in 0 Posts


    Thanks Nile and Beverleyh,

    I wanted the website horizontal navigation menu bar to be 100% in width because the entire website width was 100% in width. By default, the navigation menu bar for some reason did not reach across entire screen (100%).

    I recently changed the website width to 1100 px. and set the .solidblockmenu to 1100 px. to accomplish something similar to what I wanted (website is not currently set at 100%). I was thinking that the .solidblockmenu can only be set in px and not in percent. Also, I did no set a background when website was set to 100% in width.

    I'm going to change the website width back to 100% but would like for the entire navigation menu bar to also be 100% in width. Thanks also for the info on the .megawrapper container.

    Main Website:

    Example of the website set at 100%; however, links point to main website (I would like for the entire navigation menu bar reach across entire website at 100%).

    Here's is the CSS code. A few line are missing because I just wanted to use a simple table in the dropdown. Is there a better way to achieve this? Please excuse any mistakes, I'm new and learning.

    /* ######### Shared basic style for mega drop down menu DIV ######### */

    width:1025px; /*default width of mega menu*/
    border:2px solid #003366;
    -webkit-box-shadow: 5px 5px 5px #c8c8c8; /*css 3 shadows*/
    -moz-box-shadow: 5px 5px 5px #c8c8c8;
    box-shadow: 5px 5px 5px #c8c8c8;

    /* ######### Style for Solid Block Mega Menu ######### */

    .solidblocktheme{ /*additional mega drop down menu style for this theme*/
    border:2px solid #003366;
    padding:0; /*remove default padding inside mega menu*/
    .solidblocktheme p, .solidblocktheme .column{
    padding:6px; /*add padding inside p and .column elements within mega menu*/
    margin: 0;
    padding: 0;
    float: left;
    font: bold 16px Verdana;
    width: 1100px;
    overflow: hidden;
    margin-bottom: 1em;
    border: 1px solid #003366;
    border-width: 1px 1px;
    background: #003366 url(blockdefault.gif) center center repeat-x;
    .solidblockmenu li{
    display: inline;
    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: solid #003366;
    .solidblockmenu li a:visited{
    color: white;
    .solidblockmenu li a:hover, .solidblockmenu li a.selected{ /*Selected Tab style*/
    color: white;
    background: #ff9900 url(blockactive.gif) center center repeat-x;
    Last edited by TGGMike; 12-25-2013 at 12:50 AM. Reason: Wanted to include URL of site at 100% with problem

Similar Threads

  1. Replies: 0
    Last Post: 03-02-2013, 11:55 AM
  2. Mega Menu 960px width ?
    By mulaus in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-06-2012, 02:52 PM
  3. How to make the mega menu to be shown by click instead of hover ?
    By naremkim in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 08-01-2011, 01:32 PM
  4. Resolved Smooth Menu - Editing Properties - del horizntl line / make menu fixed width & center
    By dmshep99 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-13-2009, 02:01 AM
  5. Replies: 4
    Last Post: 06-14-2007, 12:08 AM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts