Welcome! To use this support forum, please Login or Join Today!

   

Change Navigation Bar Colours

{name}
Rank

Total Posts: 11

Joined 2013-11-05

PM

 

Hi,

Could you advise me what needs to be edited to allow me to change the navigation bar so the following colours are used?

Main colour: #1D5986
Highlighted colour: #7D9AAA
Sub Menu colour: #7D9AAA

Do I need to create a image containing a bar that is repeated to build the menu bar?

Thanks & Regards,

Andrew

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I’m not sure what you mean by highlighted color. Do you mean the hover state color?

In your style{x}.css (selected style) you should see:

/* @group Menu */

Below this group are notes which should help you to customize to your likings.

/* Top Level Links */
/* Top Level Hover Links */
/* Top Level Active Links */
/* Sublevel Link Color */
/* Sublevel Background Color */
/* Sublevel Link Hover Color */
/* Sublevel Background Hover Color */

You shouldn’t need a background image for anything if it’s a solid color.

 

{name}
Rank

Total Posts: 18

Joined 2013-09-24

PM

 

I’m using Synapse / style3.css

Read your response here. Looking for background color for current (active) page in menu bar. In style3.css it is a charcoal. my color picker says #2D2D2D could not find anything close in menu section you mention.

appreciate some help.


Attachments:

https://www.filepicker.io/api/file/9r74WHCRwKnPIwOfpVeD

Thanks

John

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

The active background is actually an image (images/style3/nav_bg_active.png):

In your style3.css you could find this rule:

/* Top Level Active Links */
#menu ul li.active a {
  color: #d90000;
  text-shadow: #000 1px 1px 0;
  background: url(./images/style3/nav_bg_active.png) repeat-x right bottom;
}

and change to something like:

/* Top Level Active Links */
#menu ul li.active a {
  color: #d90000;
  text-shadow: #000 1px 1px 0;
  background-image:none;
  background-color: #000;
}

Another option would be to simply edit images/style3/nav_bg_active.png.

{name}
Rank

Total Posts: 18

Joined 2013-09-24

PM

 

Thanks Casey, just what I needed.

John