[Resolved] Length of menu bar

[Aviationguy]

The menu bar in Foundation is a fixed length and black.  I managed to find where to change

the category color to blue but the blue stops when the categories stop leaving the rest of the bar black.

How can I change the bar color to blue?  Also, is there a way to change the size of the slider box to a little smaller?

 

[Dirty Butter]

Welcome to the forums, Aviationguy!!

The best way to accomplish this is to use a Developer tool, such as FireFox's Firebug. Then you can right click on that remaining black section and the CSS will show you what needs to be adjusted. These kinds of tools in a browser are invaluable for making cosmetic changes to Foundation. If you do this extensively your changes either need to be applied in cubecart.css, or you might want to consider copying Foundation, renaming it, and adjusting the skin config.xml file accordingly. That way your edits won't be lost on an upgrade. You will, however, have to make any skin edits in your renamed copy that any future upgrade makes to Foundation.

[Aviationguy]

Welcome to the forums, Aviationguy!!

The best way to accomplish this is to use a Developer tool, such as FireFox's Firebug. Then you can right click on that remaining black section and the CSS will show you what needs to be adjusted. These kinds of tools in a browser are invaluable for making cosmetic changes to Foundation. If you do this extensively your changes either need to be applied in cubecart.css, or you might want to consider copying Foundation, renaming it, and adjusting the skin config.xml file accordingly. That way your edits won't be lost on an upgrade. You will, however, have to make any skin edits in your renamed copy that any future upgrade makes to Foundation.

Thanks I'll look into it, but if I wanted to change it now, where would I do it?

[bsmither]

In the file cubecart.default.css, add the rule:

.top-bar { background: blue; }

To adjust the size of the BXSlider viewport, add into the same file:

.bx-wrapper { max-width: none; width: 80%; }
.bx-wrapper img { max-with: 80%; }

I suggest the file cubecart.default.css because it's easier to keep all your customizations in one file.

[Aviationguy]

Thanks.