Category Navigation Bar Design

  • Created : Monday, March 12, 2018
  • Last Updated: Friday, December 3, 2021

Your store can be customized in many ways. While we make every attempt to make customization as easy as possible; some design changes will require at the very least a basic grasp of HTML and coding knowledge*.

*Important:
Power-eCommerce support is neither able nor qualified to offer HTML support. The basic intent of this article is to instruct and guide you on the various options available to you when editing your site's design. If you are unfamiliar with HTML or design coding of any type, please stick to pre-designed options .

To Change Your Category Navigation Bar

To access the shipping methods screen from your 3dcart control panel:

  1. Go to Settings -> Store Design
  2. Navigate to the # "5. Category Navigation Bar" menu item.
  3. You have a 3 options here we will visit each one speparately below.

 

Basic Standard Category Menu: 

This is the simplest option to customize but is limited to one basic design.

This is "Menu Style" #1 - "1) Standard Customizable"

You have the option of changing the background colors and font colors by just entering the color you want in two formats by color name (i.e. Red, Blue...) or the more precise HEX numbers (i.e. #616161,#08088A... ) here is a site that can help you pick these HTML Color Chart.

 

  1. Enter Changes in fields
  1. Click "Save Changes" when done.

Once updated, the shipping carriers will use this address for the shipping calculations.

 

Category Menu with CSS editor

This option is simple if you don't make any changes to the menu. If you wish to make changes you will have to have a good understanding of both HTML and CSS but this lets you fully customize the menu to your liking.

  1. Select the Menu you you want from Menu # 2 and higher.
  2. Make any changes to the CSS you like*
  3. Click Save Changes you have found a menu you like.

 

Custom Category Menu with CSS editor: 

This option is a blank slate you you to add your own menu. If you select this option you will have to have a HIGH LEVEL understanding of both HTML and CSS but this lets you build a menu that fits your design needs.

  1. Select the Menu # 0) Custom.
  2. Make any changes to the CSS you like*
  3. Click "Save Changes".

Here is a list of some of the Dynamic Variables You can add these to your design if needed.