Results 1 to 4 of 4

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

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

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

    Hello,

    1) Script Title: : DD Mega Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddmegamenu.htm

    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
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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;
    Code:
    .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 http://fast-edit.co.uk/ 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
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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:
    http://www.thegiftgallerypromo.com/

    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%).
    http://www.distributorcentral.com/we...CompanyStores/

    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 ######### */

    .mega{
    width:1025px; /*default width of mega menu*/
    padding:10px;
    position:absolute;
    visibility:hidden;
    border:2px solid #003366;
    border-top-width:1px;
    background:#ffffff;
    -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*/
    width:auto;
    }
    .solidblockmenu{
    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

Bookmarks

Posting Permissions

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