Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.

Changing Dropdown Menu width in Brooklyn Template

Jump to bottom
ktwbc edited this page Nov 7, 2012 · 4 revisions

The products dropdown in the Brooklyn Template may be too narrow for some customers who have long category names. This may result in text wrapping which is partially obscured by the design.

Changing the column width

You can change the CSS to adjust the column widths to better suit your design. This is our recommended workflow for making this change:

  1. Using your FTP settings, you need to locate the folder /templates/brooklyn/css where your CSS files are located.

  2. In this folder are webstore-light.css and webstore-dark.css which correspond to the light and dark themes for this template. There is a third file webstore-custom.css which acts as an override. This is where we will be making our changes.

  3. Open the file webstore-light.css. For the change we will make, it does not matter if you are actually using the light or dark theme -- the lines are identical.

  4. Locate lines 60 and 61 which appear as follows:

    #nav_products li ul ul { margin: -33px 0 0 180px; z-index: 2000;}

    #nav_products ul li ul li a { background: #2c2c2c; font-size: 1em; font-weight: 700; padding: 8px 10px; width: 160px; border-bottom: 1px dotted #cccccc; z-index: 2000;}

Copy and paste these files into the blank webstore-custom.css file. Because of the sequence of CSS loading in Web Store, anything in custom will be loaded last and override the other CSS files.

  1. There are two "width" statements we must change, and they must be changed together. One is the width of the column, and the other is the spacing of the popout menu. For the first line which has 180px, add width to this, such as 50 pixels to make it 240px.
  2. For the second line, locate the 160px and add the SAME AMOUNT, 50 pixels, to make it 210px.
  3. Save, then refresh your browser to view.
  4. Continue to adjust in tandem until you are satisfied based on your categories. You should add or subtract an identical amount to each figure, so if you add 100 pixels to one line, add 100 to the other, etc.

Changing the font size

You can also make the font size smaller for the products dropdown, which will let more text appear without changing the width. Note on the second line font-size: 1em.

"em size" is a percentage, and 1 means 100%. You can use a fraction to change the size. As a test, change this to 0.9em which means 90% of the font size. Save and refresh your browser to view the change. You can continue experimenting with this setting, such as 0.95em for 95% etc. Because of the scaling that this template does on devices like iPad, you always want to use percentage changes instead of hard-coding a point size like 14px.

Additional Notes

By making your changes in webstore-custom.css, future changes to the original css files made by LightSpeed will not be lost. You can also change both the font and width if this suits your purposes. CSS files are the recommended way to change the formatting in your template per your design requirements.

Clone this wiki locally